角度驗證

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(); 
}