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