web-dev-qa-db-fra.com

Comment puis-je conditionnellement exiger des entrées de formulaire avec AngularJS?

Supposons que nous construisions une application de carnet d'adresses (exemple artificiel) avec AngularJS.

Nous avons un formulaire pour les contacts qui contient des entrées pour le courrier électronique et le numéro de téléphone, et nous voulons exiger l'un ou l'autre, mais pas les deux: Nous ne voulons que le email entrée à utiliser si l'entrée phone est vide ou invalide, et inversement.

Angular a une directive required, mais la documentation ne permet pas de savoir comment l'utiliser dans ce cas. Alors, comment pouvons-nous conditionnellement exiger un champ de formulaire? Écrire une directive personnalisée?

formsvalidationangularjs
232
Christian Smith

Il n'est pas nécessaire d'écrire une directive personnalisée. La documentation angulaire est bonne mais pas complète. En fait , il existe une directive appelée ngRequired, qui prend une expression Angular.

<input type='email'
       name='email'
       ng-model='contact.email' 
       placeholder='[email protected]'
       ng-required='!contact.phone' />

<input type='text'
       ng-model='contact.phone'             
       placeholder='(xxx) xxx-xxxx'
       ng-required='!contact.email' />

Voici un exemple plus complet: http://jsfiddle.net/uptnx/1/

458
Christian Smith

si vous voulez mettre une entrée requise si autre est écrit:

   <input type='text'
   name='name'
   ng-model='person.name'/>

   <input type='text'
   ng-model='person.lastname'             
   ng-required='person.name' />

Cordialement.

22
David Gonzalez

Simple, vous pouvez utiliser la validation angular comme:

 <input type='text'
   name='name'
   ng-model='person.name'
   ng-required='!person.lastname'/>

   <input type='text'
   name='lastname'
   ng-model='person.lastname'             
   ng-required='!person.name' />

Vous pouvez maintenant renseigner la valeur dans un seul champ de texte. Vous pouvez soit remplir le nom ou le nom de famille. De cette façon, vous pouvez utiliser le remplissage conditionnel obligatoire dans AngularJs.

12
Bipin Shilpakar

Pour Angular2

<input type='email' 
    [(ngModel)]='contact.email'
    [required]='!contact.phone' >
9
laffuste