Wie kann ich mit AngularJS bedingt Formulareingaben 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 das andere , aber nicht beide benötigen : Wir möchten, dass die emailEingabe nur erforderlich ist, wenn die phoneEingabe leer oder ungültig ist, und umgekehrt.

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

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

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

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

Wenn Sie eine Eingabe eingeben möchten, wenn eine 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.

Einfach können Sie die Winkelvalidierung wie folgt verwenden:

 <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 unter bestimmten Bedingungen ausfüllen.

Für Angular2

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