How can I conditionally require form inputs with AngularJS?

angularjs, forms, validation

Solution

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/

Problem

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?

Original source