web-dev-qa-db-fra.com

Angular JS: Valider les champs du formulaire avant de le soumettre

Je crée une Angular JS avec un formulaire en 2 étapes. Il s'agit en fait d'un seul formulaire, mais utilise JavaScript pour masquer le premier panneau et afficher le second lorsque l'utilisateur clique sur le "suivant" et passe à l'étape 2. J'ai défini des validations "obligatoires" sur certains des champs de l'étape 1, mais évidemment, elles ne sont pas validées lorsque l'utilisateur clique sur le bouton "suivant" ... elles sont validées lorsque le " cliquez sur le bouton "Soumettre" à la fin de l'étape 2.

Existe-t-il un moyen de dire à angular de valider ces champs dans le formulaire lorsque l'on clique sur le bouton 'suivant'?

javascriptangularjsvalidation
36
Andrew

Je suggère d'utiliser des sous-formulaires. AngularJS prend en charge la mise d'un formulaire à l'intérieur d'un autre, et la validité se propage de la forme inférieure à la forme supérieure;

Voici un exemple: http://plnkr.co/edit/SruBmlGZZtbwiU8cktAp?p=preview

Voici du code pour que vous puissiez saisir l'idée:

  <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>
71
Valentyn Shybanov