isValid Form vaildation 다음 함수를 실행하십시오. AngularJS

Question

AngularJS 형식이 유효한 경우 다른 사람이 함수를 실행하는 것과 관련된 몇 가지 지침을 제공 할 수 있는지 궁금합니다.

양식이 유효하지 않은 경우 오류가 표시되지만 제출 버튼을 클릭 한 후 양식이 유효하면 양식의 다음 단계 (다단계 양식)로 이동하고 싶습니다. 기본적으로 다음 버튼을 클릭하십시오. 유효한 경우 새 탭 또는 확장 가능 등을 엽니 다.

모든 포인터는 매우 감사하겠습니다.

종류와 관련,

Answer 1

당신이 양식은 양식 태그가

<form #contactForm="ngForm"> ... 

과 같은

<button (click)="submit()" [disabled]="!contactForm.form.valid" type="submit" class="btn btn-primary">Submit</button> 

같은 무효 인 경우 버튼을 비활성화 시도 할 수

하거나 버튼을 사용하지 않도록하려면 코드에서 유효한지 확인하십시오

<button (click)="submit($event, contactForm)" class="btn btn-primary">Submit</button> 

과에 당신이 같이 할 수

submit(event:any, contactForm:NgForm): void { 
     event.preventDefault(); 
     if (contactForm.form.valid) { 
      ... 
     } 
    } 

Answer 2

기능 제출 :

HTML :

<form name="myForm"> 
    <div id="step1"> 
     <button type="button" ng-click="nextStep(form, validateStepOne, 2)">Next step</button> 
    </div> 
    <div id="step2">...</div> 
    <div id="step3">...</div> 
</form> 

JS :

function validateStepOne() { 
    // validate form one and return true or false 
} 

function nextStep(form, validation, nextStepIndex) { 
    if(form.$valid && validation()) { 
     // go to next step 
    } 
}