JS angolare: convalida i campi modulo prima dell'invio

Question

Sto costruendo un'app Angular JS con un modulo in 2 fasi. In realtà è solo un modulo, ma usa JavaScript per nascondere il primo pannello e mostrare il secondo quando l'utente fa clic sul pulsante 'successivo' e passa al passaggio 2. Ho impostato le convalide 'richieste' su alcuni dei campi nel passaggio 1, ma ovviamente, non vengono convalidati quando l'utente fa clic sul pulsante "successivo" ... vengono convalidati quando si fa clic sul pulsante "invia" alla fine del passaggio 2.

C'è un modo che posso dire angolare per convalidare quei campi nel modulo quando si fa clic sul pulsante "successivo"?

Answer 1

Suggerisco di utilizzare le sotto-forme. AngularJS supporta il posizionamento di una forma all'interno di un'altra e la validità viene propagata da una forma inferiore a una superiore;

Ecco esempio: http://plnkr.co/edit/SruBmlGZZtbwiU8cktAp?p=preview

Ecco po 'di codice in modo da poter afferrare l'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>