Comment puis-je exiger conditionnellement 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 de contacte et qui dispose d'entrées pour l'email et le numéro de téléphone, et nous voulons exiger l'un ou l'autre, mais pas les deux: Nous voulons seulement le email input être nécessaire si la phone est vide ou non valide, et vice versa.

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

222
demandé sur banana 2012-11-20 07:24:40

4 réponses

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

<input type='email'
       name='email'
       ng-model='contact.email' 
       placeholder='your@email.com'
       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/

443
répondu Christian Smith 2012-11-20 03:24:40

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

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

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

Cordialement.

19
répondu David Gonzalez 2015-08-20 14:42:24

Simple vous pouvez utiliser la validation angulaire 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 remplir la valeur dans un seul champ de texte. Soit vous pouvez remplir name ou lastname. De cette façon, vous pouvez utiliser conditionnel requis remplir AngularJs.

10
répondu Bipin Shilpakar 2017-07-19 12:44:01

Pour Angulaire2

<input type='email' 
    [(ngModel)]='contact.email'
    [required]='!contact.phone' >
6
répondu laffuste 2018-01-19 06:45:22