Wie kann ich mit AngularJS bedingt Formulareingaben anfordern?

234

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?

forms validation angularjs Christian Smith
quelle

Antworten:

463

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

Christian Smith
quelle
5
Es sollte kein Problem sein, oder? Aktualisieren Sie einfach die Bedingungen entsprechend. Wenn Sie erklären, was Sie ein bisschen mehr brauchen, kann ich (oder eine andere Person hier) Ihnen zeigen :)
Puce
1
Als Randnotiz können Sie auch eine Funktion verwenden und dort komplexere Logik ausführen.
Leandro Zubrezki
1
Diese Funktion ist jetzt dokumentiert: docs.angularjs.org/api/ng/directive/ngRequired
bjunix
25

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.

David Gonzalez
quelle
14

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.

Bipin Shilpakar
quelle
Man kann immer noch beide Felder ausfüllen, nicht wahr?
myTerminal
ja Benutzer kann beide Felder füllen, auch in diesem Zustand, wenn Benutzer ein Feld füllen, ist das andere Feld nicht obligatorisch
Bipin Shilpakar
13

Für Angular2

<input type='email' 
    [(ngModel)]='contact.email'
    [required]='!contact.phone' >
laffuste
quelle
BEARBEITEN: Dies löst einen Konsolenfehler aus. "ExpressionChangedAfterItHasBeenCheckedError: Der Ausdruck wurde geändert, nachdem er überprüft wurde." Wenn ich das Optionsfeld aktiviere, wende ich es an, aber es scheint die bedingte Validierung durchzuführen.
Eric Soyke
4
Angular2 + ist in dieser Frage nicht markiert. Da es sich im Wesentlichen um ein anderes Framework handelt, ist diese Antwort nicht relevant.
Isherwood
1
@isherwood du hast recht. Ich habe es hinzugefügt, weil ich hier geendet habe, während ich danach gegoogelt habe. Ich werde es löschen, wenn es herabgestuft oder kontrovers diskutiert wird.
Laffuste
@Iaffuste Sie können eine neue Frage für Angular2 + posten und beantworten, um es den Leuten zu erleichtern, die sich damit befassen. +1 sowieso =)
Arjel