Angular JS: Sprawdź poprawność pól formularza przed przesłaniem

Question

Tworzę aplikację Angular JS z formularzem dwuetapowym. To naprawdę tylko jedna forma, ale wykorzystuje JavaScript, aby ukryć pierwszy panel i pokazać drugi, gdy użytkownik kliknie przycisk "Dalej" i przejdzie do kroku 2. Ustawiłem "wymagane" sprawdzanie poprawności w niektórych polach w kroku 1, ale oczywiście, nie są one sprawdzane, gdy użytkownik kliknie przycisk "dalej" ... zostaną sprawdzone po kliknięciu przycisku "wyślij" pod koniec kroku 2.

Czy jest jakiś sposób, który mogę określić kątowo? sprawdzić poprawność tych pól w formularzu po kliknięciu przycisku "następny"?

Answer 1

Proponuję użyć podformatów. AngularJS obsługuje umieszczanie jednej formy w drugiej, a ważność jest propagowana od formy niższej do górnej;

Oto przykład: http://plnkr.co/edit/SruBmlGZZtbwiU8cktAp?p=preview

Oto kod, dzięki czemu można uchwycić pomysł:

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