it-swarm.com.de

Wie kann ich mit AngularJS Formulareingaben bedingt anfordern?

Angenommen, wir erstellen eine Adressbuchanwendung (erfundenes Beispiel) mit AngularJS.

Wir haben ein Formular für Kontakte, das Eingaben für E-Mail und Telefonnummer enthält, und wir möchten das eine oder andere, aber nicht beide: Wir möchten nur das email Eingabe erforderlich, wenn die Eingabe phone leer oder ungültig ist und umgekehrt.

Angular hat eine required -Direktive, aber aus der Dokumentation geht nicht hervor, wie sie in diesem Fall verwendet wird. Wie können wir also ein Formularfeld bedingt benötigen? Eine benutzerdefinierte Direktive schreiben?

232
Christian Smith

Es ist nicht erforderlich, eine benutzerdefinierte Direktive zu schreiben. Angulars Dokumentation ist gut, aber nicht vollständig. Tatsächlich , es gibt eine Direktive namens ngRequired, die einen Angular Ausdruck verwendet.

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

Hier ist ein vollständigeres Beispiel: http://jsfiddle.net/uptnx/1/

458
Christian Smith

wenn Sie eine Eingabe machen wollen, wenn andere geschrieben ist:

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

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

Grüße.

22
David Gonzalez

Einfach können Sie angular Validierung wie:

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

Sie können den Wert jetzt nur in ein Textfeld eingeben. Sie können entweder den Namen oder den Nachnamen eingeben. Auf diese Weise können Sie AngularJs mit der Bedingung "Erforderlich" ausfüllen.

12
Bipin Shilpakar

Für Angular2

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