Как я могу условно требовать ввода формы с AngularJS?

213

Предположим, что мы создаем приложение адресной книги (надуманный пример) с помощью AngularJS.

У нас есть форма для контактов, у которых есть входные данные для электронной почты и номера телефона, и мы хотим потребовать один или другой, но не оба. Мы хотим, чтобы email, если вход phone пуст или недействителен, и наоборот.

Angular имеет директиву required, но из документа не ясно, как использовать его в этом случае. Итак, как мы можем условно потребовать поле формы? Напишите пользовательскую директиву?

Теги:
validation
forms

4 ответа

450
Лучший ответ

Нет необходимости писать настраиваемую директиву. Документация Angular хороша, но не завершена. Фактически, существует директива ngRequired, которая принимает выражение Angular.

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

Вот более полный пример: http://jsfiddle.net/uptnx/1/

Поделиться
  • 5
    Это не должно быть проблемой, верно? Просто обновите условия соответственно. Если вы объясните, что вам нужно немного больше, я (или другой человек здесь) смогу показать вам :)
  • 1
    В качестве примечания вы также можете использовать функцию и выполнять более сложную логику.
Показать ещё 1 комментарий
18

если вы хотите поместить требуемый ввод, если записывается другое:

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

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

С уважением.

Поделиться
6

Просто вы можете использовать проверку angular, например:

 <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.

Поделиться
  • 0
    Можно все еще заполнить оба поля, не так ли?
  • 0
    да, пользователь может заполнить оба поля, также в этом состоянии, если пользователь заполняет одно поле, другое поле не является обязательным
0

Для Angular2

<input type='email' 
    [(ngModel)]='contact.email'
    [required]='!contact.phone' >
Поделиться
  • 0
    РЕДАКТИРОВАТЬ: Это вызывает консольную ошибку "ExpressionChangedAfterItHasBeenCheckedError: Выражение изменилось после того, как оно было проверено." Когда я проверяю переключатель, я применяю его, но, похоже, он выполняет условную проверку.
  • 3
    Angular2 + не помечен по этому вопросу. Поскольку это по сути другая структура, этот ответ не имеет значения.
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню