각도 검증

Question

나는 이름과 같은 일부 데이터를 입력하도록 요구하는 필드 셋을 가지고,이 같은 emai 토지 전화 번호 :

클래스 next 그것에 관련된 기능이

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

:

을

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

양식이 제대로 완료되지 않은 경우에도 현재 상태에서 전체가 비어 있어도 다음을 클릭 할 수 있습니다. 원하지 않습니다. 입력을 제대로 채웠는지 확인하기 위해 다음을 클릭하고 각 필드 아래에 문제가 무엇인지에 대한 메시지/경고가 표시되도록합니다 (예 : 전자 메일의 경우 @를 포함해야 함)

부트 스트랩에서 btn btn-primary 클래스를 사용해 보았습니다.하지만 사용하면 (그들은 원하는대로 유효성 검사를 수행합니다) 더 이상 다음 클래스를 사용할 수 없습니다. 어떤 아이디어로 작동 시키는가? 해당 필드가 비어 있지만 ng-disable과 같은 Angular 지시문을 사용했지만 필드를 채우면 버튼이 여전히 작동하지 않아 어떻게 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> 

어딘가에 : 나는 다음이, 그 이유는 이미 3 년 분할있어 큰 형태를 가지고 있기 때문에

가

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