javascript - 输入按钮的 Angular 验证

Question

我有一个字段集，要求用户输入一些数据，例如姓名、Emai 固定电话号码，如下所示:

        <h2 class="fs-title">Personal data</h2>
        <input type="text" name="firstname" id="firstname" placeholder="First Name" class="textbox" ng-model="firstName"required/>
        <input type="text" name="lastname" id="lastname" placeholder="Last Name" class="textbox" ng-model="lastName" required/>
        <input type="email" name="email" class="textbox" placeholder="Email" ng-model="user.email" required>
        <input type="text" name="contact" placeholder="Phone number" id="contact" ng-model="phoneNumber" required/>
        <input type="button" name="next" class="next action-button" value="Next"/>

类next有一个与之关联的函数:

var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches


$(".next").click(function(){
    if(animating) return false;
    animating = true;

    current_fs = $(this).parent();
    next_fs = $(this).parent().next();

    //activate next step on progressbar using the index of next_fs
    $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");

    //show the next fieldset
    next_fs.show();

    //hide the current fieldset with style
    current_fs.animate({opacity: 0}, {
        step: function(now, mx) {
            //as the opacity of current_fs reduces to 0 - stored in "now"
            //1. scale current_fs down to 80%
            scale = 1 - (1 - now) * 0.2;
            //2. bring next_fs from the right(50%)
            left = (now * 50)+"%";
            //3. increase opacity of next_fs to 1 as it moves in
            opacity = 1 - now;
            current_fs.css({
                'transform': 'scale('+scale+')',
                'position': 'absolute'
            });
            next_fs.css({'left': left, 'opacity': opacity});
        },
        duration: 800,
        complete: function(){
            current_fs.hide();
            animating = false;
        },
        //this comes from the custom easing plugin
        // easing: 'easeInOutBack'
        linear: 'easeInOutBack'
    });
});

在当前状态下，即使表单未正确填写，即使它是空的并且我不希望这样，您也可以单击“下一步”。我希望当我单击“下一步”时，还检查输入是否正确填写，如果没有正确填写，则在每个字段下显示一条有关问题所在的消息/警告(即在电子邮件上，它必须包含@)

我尝试使用 bootstrap 中的 btn btn-primary 类，但如果我使用它们(它们按照我的意愿进行验证)，我就不能再使用下一个类了。有什么想法如何让它发挥作用吗？我尝试了 Angular 指令，例如 ng-disable ，条件是这些字段为空，但由于某种原因，如果我填写这些字段，按钮仍然不起作用，那么我如何使用 btn btn-primary 并仍然有我的下一个类？

Answer 1

使用表单API:

<form ng-submit="saveForm(MyForm.$valid)" name="MyForm">
   <input ng-model="myField" required>
   <button type="submit">Next</button>
</form>

Controller 中的某处:

function saveForm(isValid){
   if(!isValid) showErrors();
   save();
}