Jak warunkowo wymagać danych wejściowych formularza za pomocą AngularJS?

234

Załóżmy, że budujemy aplikację książki adresowej (wymyślony przykład) z AngularJS.

Mamy formularz dla kontaktów z danymi wejściowymi dla adresu e-mail i numeru telefonu, i chcemy wymagać jednego lub drugiego , ale nie obu : chcemy, aby emaildane były wymagane tylko wtedy, gdy phonedane są puste lub nieprawidłowe i odwrotnie.

Angular ma requireddyrektywę, ale z dokumentacji nie wynika jasno, jak jej użyć w tym przypadku. Jak więc możemy warunkowo wymagać pola formularza? Napisz niestandardową dyrektywę?

forms validation angularjs Christian Smith
źródło

Odpowiedzi:

463

Nie ma potrzeby pisania niestandardowej dyrektywy. Dokumentacja Angulara jest dobra, ale nie kompletna. W rzeczywistości istnieje tak zwana dyrektywa ngRequired, która przyjmuje wyrażenie kątowe.

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

Oto bardziej kompletny przykład: http://jsfiddle.net/uptnx/1/

Christian Smith
źródło
5
To nie powinno być problemem, prawda? Po prostu odpowiednio zaktualizuj warunki. Jeśli wyjaśnisz, czego potrzebujesz trochę więcej, ja (lub inna osoba tutaj) będę mógł ci pokazać :)
Puce
1
Na marginesie możesz także użyć funkcji i wykonać bardziej złożoną logikę.
Leandro Zubrezki
1
Ta funkcja jest już udokumentowana: docs.quarejs.org/api/ng/directive/ngWymagane
bjunix
25

jeśli chcesz wstawić wymagane dane wejściowe, jeśli inne są zapisane:

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

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

Pozdrowienia.

David Gonzalez
źródło
14

Proste użycie walidacji kątowej, takiej jak:

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

Możesz teraz wypełnić wartość tylko w jednym polu tekstowym. Możesz podać imię lub nazwisko. W ten sposób możesz użyć warunkowego wymaganego wypełnienia w AngularJs.

Bipin Shilpakar
źródło
Nadal można wypełnić oba pola, prawda?
myTerminal
tak, użytkownik może wypełnić oba pola, również w tym stanie, jeśli użytkownik wypełni jedno pole, drugie pole nie jest obowiązkowe
Bipin Shilpakar 18.09.17
13

Dla Angular2

<input type='email' 
    [(ngModel)]='contact.email'
    [required]='!contact.phone' >
Laffuste
źródło
EDYCJA: Zgłasza to błąd konsoli „ExpressionChangedAfterItHasBeenCheckedError: Wyrażenie zmieniło się po sprawdzeniu.” kiedy zaznaczam przycisk opcji, stosuję to, ale wydaje się, że wykonuje warunkową weryfikację.
Eric Soyke,
4
Angular2 + nie jest oznaczony tym pytaniem. Ponieważ jest to zasadniczo inny framework, ta odpowiedź nie ma znaczenia.
isherwood
1
@isherwood masz rację. Dodałem go, ponieważ skończyłem tutaj, szukając go w Google. Skasuję go, jeśli zostanie odrzucony lub wzbudzi kontrowersje.
laffuste
@Iaffuste, możesz napisać i odpowiedzieć na nowe pytanie dla Angular2 +, aby ułatwić ludziom, którzy się tym zajmują. +1 mimo to =)
arjel