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

234

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

Nous avons un formulaire pour les contacts qui contient des entrées pour l'e-mail et le numéro de téléphone, et nous voulons exiger l' un ou l'autre , mais pas les deux : nous voulons que l' emailentrée soit requise si l' phoneentrée est vide ou invalide, et vice versa.

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

forms validation angularjs Christian Smith
la source

Réponses:

463

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 une expression angulaire.

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

Christian Smith
la source
5
Ça ne devrait pas être un problème, non? Mettez à jour les conditions en conséquence. Si vous expliquez ce dont vous avez besoin un peu plus, je (ou une autre personne ici) pourra vous le montrer :)
Puce
1
En remarque, vous pouvez également utiliser une fonction et y faire une logique plus complexe.
Leandro Zubrezki
1
Cette fonctionnalité est désormais documentée: docs.angularjs.org/api/ng/directive/ngRequired
bjunix
25

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

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

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

Cordialement.

David Gonzalez
la source
14

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 le nom ou le nom de famille. De cette façon, vous pouvez utiliser le remplissage conditionnel requis dans AngularJs.

Bipin Shilpakar
la source
On peut toujours remplir les deux champs, n'est-ce pas?
myTerminal
oui l'utilisateur peut remplir les deux champs, également dans cette condition si l'utilisateur remplit un champ, l'autre champ n'est pas obligatoire
Bipin Shilpakar
13

Pour Angular2

<input type='email' 
    [(ngModel)]='contact.email'
    [required]='!contact.phone' >
laffuste
la source
EDIT: Cela génère une erreur de console "ExpressionChangedAfterItHasBeenCheckedError: l'expression a changé après avoir été vérifiée." quand je vérifie le bouton radio j'applique ceci, mais il semble faire la validation conditionnelle.
Eric Soyke
4
Angular2 + n'est pas marqué sur cette question. Comme il s'agit essentiellement d'un cadre différent, cette réponse n'est pas pertinente.
isherwood
1
@isherwood vous avez raison. Je l'ai ajouté parce que je me suis arrêté ici en cherchant sur Google. Je le supprimerai s'il est rejeté ou controversé.
laffuste
@Iaffuste, vous pouvez poster et répondre à une nouvelle question pour Angular2 + pour le rendre facile pour les personnes qui se renseignent. +1 quand même =)
arjel