How can I conditionally require form inputs with AngularJS?

forms validation angularjs
Christian Smith picture Christian Smith · Nov 20, 2012 · Viewed 164k times · Source

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?

Answer

Christian Smith picture Christian Smith · Nov 20, 2012

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='[email protected]'
       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/

Related questions

ng-pattern doesn't show $error.pattern

I have script here and ng-pattern works correctly because scope.subnet is shown in Output only after input matches pattern. But ng-show doesn't display any error if ng-pattern is not matched <body ng-contoller="myConfigGenCtr"> <form novalidate name="…

Read More
AngularJS password confirmation noMatch not working?

I have this script here: angular.module('UserValidation', []).directive('validPasswordC', function () { return { require: 'ngModel', link: function (scope, elm, attrs, ctrl) { ctrl.$parsers.unshift(function (viewValue, $scope) { var noMatch = viewValue != scope.signupForm.password.$viewValue ctrl.$setValidity('noMatch', !noMatch) }) } } }); And here's the …

Read More
Using ng-pattern to validate email in AngularJS

I'm new to Angular and have trouble getting the ng-pattern to validate the email address based on a REGEX. In fact the other default angular validation for email also changes behaviour and only shows an error if the entire field …

Read More