How to add custom validation to an AngularJS form?

Question

I have a form with input fields and validation set up by adding the required attributes and such. But for some fields I need to do some extra validation. How would I "tap in" to the validation that FormController controls?

Custom validation could be something like "if these 3 fields are filled in, then this field is required and needs to be formatted in a particular way".

There's a method in FormController.$setValidity but that doesn't look like a public API so I rather not use it. Creating a custom directive and using NgModelController looks like another option, but would basically require me to create a directive for each custom validation rule, which I do not want.

Actually, marking a field from the controller as invalid (while also keeping FormController in sync) might be the thing that I need in the simplest scenario to get the job done, but I don't know how to do that.

Answer 1

You can add custom validation to an AngularJS form Angular-UI's project includes a UI-validate directive, which will probably help you with this. It lets you specify a function to call to do the validation.

From the demo page:-

<input ng-model="email" ui-validate='{blacklist : notBlackListed}'> 

<span ng-show='form.email.$error.blacklist'>This email is black-listed!</span>

Are you interested in learning Angularjs from the basics! Here's the right video for you on Angularjs provided by Intellipaat:

The controller code:-

function ValidateCtrl($scope) { 

$scope.blackList = ['[email protected]','[email protected]']; $scope.notBlackListed = function(value) { 

return $scope.blackList.indexOf(value) === -1; 

 }; 

}