javascript - solo - validar formulario angular 6

Angular JS: Validar campos de formulario antes de enviar

Question

Estoy construyendo una aplicación Angular JS con una forma de 2 pasos. En realidad, es solo una forma, pero utiliza JavaScript para ocultar el primer panel y muestra el segundo cuando el usuario hace clic en el botón "siguiente" y pasa al paso 2. He establecido validaciones "requeridas" en algunos de los campos en el paso 1, pero, obviamente, no se validan cuando el usuario hace clic en el botón "siguiente" ... se validan cuando se hace clic en el botón "enviar" al final del paso 2.

¿Hay alguna manera en que pueda decir angular para validar esos campos en el formulario cuando se hace clic en el botón "siguiente"?

Answer 1

Sugiero usar subformularios. AngularJS admite poner una forma dentro de otra, y la validez se propaga de forma inferior a superior;

Aquí hay un ejemplo: http://plnkr.co/edit/SruBmlGZZtbwiU8cktAp?p=preview

Aquí hay un código para que pueda comprender la idea:

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