角度验证

Question

我有一个要求用户输入喜欢的名称一些数据的字段集，这样鄂麦地电话号码：

 <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> 

在控制器

和地方：

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