각도 JS: 제출하기 전에 양식 필드 유효성 확인

각도 JS: 제출하기 전에 양식 필드 유효성 확인

저는 2단계 폼의 Angular JS 앱을 만들고 있습니다.실제로는 하나의 형태이지만, JavaScript를 사용하여 첫 번째 패널을 숨기고 두 번째 패널은 사용자가 '다음' 버튼을 클릭하여 스텝2로 넘어갈 때 보여줍니다.1단계에서 일부 필드에 대해 '필수' 유효성 검사를 설정했지만 사용자가 '다음' 버튼을 클릭해도 유효성 검사가 수행되지 않습니다.2단계의 마지막에 '선택' 버튼을 클릭하면 유효성이 확인됩니다.

'다음' 버튼을 클릭했을 때 양식에 있는 필드의 유효성을 확인할 수 있는 각도가 있습니까?

보조양식을 사용하는 것이 좋습니다.각진JS는 하나의 폼을 다른 폼 안에 넣는 것을 지원하며 유효성은 하위 폼에서 상위 폼으로 전파됩니다.

다음은 예를 제시하겠습니다.http://plnkr.co/edit/SruBmlGZZtbwiU8cktAp?p=preview

다음은 아이디어를 파악할 수 있는 코드입니다.

  <form name='myform' ng-init="step = 1">
    <div ng-show="step==1">
      <h3>Step 1: Enter some general info</h3>
      <div ng-form='step1form'>
        Name: <input ng-model="name" required>
      </div>
      <button ng-disabled="!step1form.$valid" ng-click="step = 2">Next</button>
    </div>

    <div ng-show="step==2">
      <h3>Step 2: Final info</h3>
      <div ng-form="step2form">
          Phone: <input ng-model="phone" required>
      </div>
      <button  ng-click="step = 1">Prev</button>
      <button ng-disabled="!myform.$valid" ng-click="submit()">Submit</button>
    </div>
    <div>
      Validation status:
      <div> Whole form valid? {{myform.$valid}} </div>
      <div> Step1 valid? {{step1form.$valid}} </div>
      <div> Step2 valid? {{step2form.$valid}} </div>
    </div>
  </form>

언급URL : https://stackoverflow.com/questions/15732184/angular-js-validate-form-fields-before-submit