Как я могу условно требовать ввода формы с 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
Это не должно быть проблемой, верно? Просто обновите условия соответственно. Если вы объясните, что вам нужно немного больше, я (или другой человек здесь) смогу показать вам :)
Puce
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

Для Angular2

<input type='email' 
    [(ngModel)]='contact.email'
    [required]='!contact.phone' >
laffuste
источник
РЕДАКТИРОВАТЬ: Это вызывает консольную ошибку «ExpressionChangedAfterItHasBeenCheckedError: Выражение изменилось после того, как оно было проверено.» когда я проверяю переключатель, я применяю его, но, похоже, он выполняет условную проверку.
Эрик Сойке
4
Angular2 + не помечен по этому вопросу. Поскольку это по сути другая структура, этот ответ не имеет значения.
Ишервуд
1
@isherwood ты прав. Я добавил это, потому что я закончил здесь, прибегая к этому поиску. Я буду удалять его , если он будет downvoted или спорным.
Лаффуст
@Iaffuste, вы можете написать и ответить на новый вопрос для Angular2 +, чтобы людям было проще разобраться в этом. +1 в любом случае =)
Арджел