Как я могу условно требовать ввода формы с 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' >

РЕДАКТИРОВАТЬ: Это вызывает консольную ошибку «ExpressionChangedAfterItHasBeenCheckedError: Выражение изменилось после того, как оно было проверено.» когда я проверяю переключатель, я применяю его, но, похоже, он выполняет условную проверку.
— Эрик Сойке

4
Angular2 + не помечен по этому вопросу. Поскольку это по сути другая структура, этот ответ не имеет значения.
— Ишервуд

1
@isherwood ты прав. Я добавил это, потому что я закончил здесь, прибегая к этому поиску. Я буду удалять его , если он будет downvoted или спорным.
— Лаффуст

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