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

Question

Je suis en train de construire un Angular JS application avec une 2-forme de procédures. C'est vraiment juste une forme, mais utilise JavaScript pour cacher le premier panneau et de montrer la seconde, lorsque l'utilisateur clique sur le bouton "suivant" et passe à l'étape 2. J'ai mis "requis" validations sur certains champs dans l'étape 1, mais évidemment, ils ne sont pas validés lorsque l'utilisateur clique sur le bouton "suivant" ...ils sont validées lorsque le bouton "envoyer" est cliqué à la fin de l'étape 2.

Est-il possible que je peux dire angulaire permettant de valider les champs dans le formulaire lorsque le bouton "suivant" est cliqué?

Answer 1

Je suggère d'utiliser des sous-formulaires. AngularJS prend en charge l’insertion d’une forme à l’autre, et la validité est propagée de forme inférieure à supérieure;

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

Voici un code pour grap 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>