Як я можу умовно вимагати введення форми за допомогою AngularJS?


234

Припустимо, ми будуємо додаток для адресної книги (надуманий приклад) за допомогою AngularJS.

У нас є форма для контактів , який має входи для електронної пошти і номер телефону, і ми хочемо , щоб вимагати одне чи інше , але з обидва : Ми тільки хочемо , щоб emailвхід потрібно , якщо phoneвхід або недійсне, і навпаки.

Angular має requiredдирективу, але з документації не зрозуміло, як її використовувати в цьому випадку. То як ми можемо умовно вимагати поля форми? Написати власну директиву?

Відповіді:


463

Не потрібно писати користувацьку директиву. Документація Angular хороша, але не повна. Насправді існує директива ngRequired, яка називається кутовим виразом.

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

Ось більш повний приклад: http://jsfiddle.net/uptnx/1/


5
Це не повинно бути проблемою, правда? Просто оновіть умовні умови відповідно. Якщо ви поясните, що вам потрібно трохи більше, я (або інша людина тут) зможу вам показати :)
— Пуце

1
Як бічна примітка, ви також можете використовувати функцію та робити складнішу логіку там.
— Леандро Зубрезки

1
Ця функція задокументована зараз: docs.angularjs.org/api/ng/directive/ngRequired
— bjunix

25

якщо ви хочете поставити необхідний вхід, якщо написано інше:

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

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

З повагою


14

Ви можете використовувати кутову перевірку, наприклад:

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

Тепер ви можете заповнити значення лише в одному текстовому полі. Ви можете заповнити ім’я чи прізвище. Таким чином ви можете використовувати умовне заповнення AngularJs.


Ще можна заповнити обидва поля, чи не так?
— myTerminal

так, користувач може заповнити обидва поля, також у цій умові, якщо користувач заповнить одне поле, інше поле не є обов’язковим
— Bipin Shilpakar

13

Для кутових2

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

EDIT: Це помилка консолі "ExpressionChangedAfterItHasBeenCheckedError: Вираз змінився після його перевірки." коли я перевіряю перемикач, я застосовую це, але, схоже, це робить умовна перевірка.
— Ерік Сойке

4
Angular2 + не позначений цим питанням. Оскільки це по суті інші рамки, ця відповідь не є актуальною.
— isherwood

1
@isherwood ви праві. Я додав це тому, що закінчився тут, гуляючи за це. Я видаляю його, якщо він стає зниженим або суперечливим.
— laffuste

@Iaffuste ви можете опублікувати та відповісти на нове запитання для Angular2 +, щоб полегшити людям, які займаються цим. +1 все одно =)
— arjel
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.