How can I conditionally require form inputs with AngularJS?

Question

Suppose we're building an address book application (contrived example) with AngularJS.

We have a form for contacts that has inputs for email and phone number, and we want to require one or the other, but not both: We only want the email input to be required if the phone input is empty or invalid, and vice versa.

Angular has a required directive, but it's not clear from the documentation how to use it in this case. So how can we conditionally require a form field? Write a custom directive?

score 473 · Accepted Answer · answered Nov 20 '12 at 03:24

473

There's no need to write a custom directive. Angular's documentation is good but not complete. In fact, there is a directive called ngRequired, that takes an Angular expression.

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

Here's a more complete example: http://jsfiddle.net/uptnx/1/

answered Nov 20 '12 at 03:24

Christian Smith

8,089
3
19
18

5

It shouldn't be a problem, right? Just update the conditionals accordingly. If you explain what you need a bit more I (or other person here) will be able to show you :) – Puce Feb 02 '15 at 09:31
1

As a side note, you can also use a function and do more complex logic there. – Leandro Zubrezki Nov 22 '15 at 12:47
1

This feature is documented by now: https://docs.angularjs.org/api/ng/directive/ngRequired – bjunix May 09 '16 at 11:42

score 26 · Answer 2 · answered Aug 20 '15 at 14:42

26

if you want put a input required if other is written:

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

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

Regards.

answered Aug 20 '15 at 14:42

David Gonzalez

751
7
6

score 15 · Answer 3 · answered Jan 19 '18 at 06:45

15

For Angular2

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

answered Jan 19 '18 at 06:45

laffuste

16,287
8
84
91

EDIT: This is throwing a console error "ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked." when I check the radio button I'm applying this on, but it does appear to do the conditional validation. – Eric Soyke Feb 15 '18 at 21:01
4

Angular2+ isn't tagged on this question. Since it's essentially a different framework, this answer isn't relevant. – isherwood Mar 01 '18 at 15:39
1

@isherwood you are right. I added it because I ended here while googling for that. I will delete it if it gets downvoted or controversial. – laffuste Aug 09 '18 at 09:39
@Iaffuste you could post and reply on a new question for Angular2+ to make it easy for people looking into this. +1 anyway =) – remmargorp Sep 28 '18 at 08:45

score 14 · Answer 4 · answered Jul 19 '17 at 12:44

14

Simple you can use angular validation like :

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

You can now fill the value in only one text field. Either you can fill name or lastname. In this way you can use conditional required fill in AngularJs.

answered Jul 19 '17 at 12:44

Bipin Shilpakar

188
2
9

One can still fill in both the fields, can't they? – myTerminal Sep 15 '17 at 14:45
yes user can fill both the field, also in this condition if user fill one field, the other field is not mandatory – Bipin Shilpakar Sep 18 '17 at 05:44

score 0 · Answer 5 · answered Jul 26 '20 at 06:09

In AngularJS (version 1.x), there is a build-in directive ngRequired

<input type='email'
       name='email'
       ng-model='user.email' 
       placeholder='your@email.com'
       ng-required='!user.phone' />

<input type='text'
       ng-model='user.phone'             
       placeholder='(xxx) xxx-xxxx'
       ng-required='!user.email' />

In Angular2 or above

<input type='email'
       name='email'
       [(ngModel)]='user.email' 
       placeholder='your@email.com'
       [required]='!user.phone' />

<input type='text'
       [(ngModel)]='user.phone'             
       placeholder='(xxx) xxx-xxxx'
       [required]='!user.email' />

score 0 · Answer 6 · edited Jan 13 '21 at 15:09

0

For Angular 2

<input [(ngModel)]='email' [required]='!phone' />
<input [(ngModel)]='phone' [required]='!email' />

edited Jan 13 '21 at 15:09

Patrick Ferreira

1,983
1
15
31

answered Jan 13 '21 at 13:41

Kalyan Koppuravuri

7
2

How can I conditionally require form inputs with AngularJS?

6 Answers6

Linked