Angular Validation

AngularJS Form Validation

---

AngularJS tin validate input data.

---

Form Validation

AngularJS offers client-side shape validation.
AngularJS monitors the the world of the shape in addition to input fields (input, textarea, select), in addition to lets yous notify the user well-nigh the electrical flow state.
AngularJS besides holds information well-nigh whether they guide keep been touched, or modified, or not.
You tin exercise criterion HTML5 attributes to validate input, or yous tin brand your ain validation functions.

Client-side validation cannot lone secure user input. Server side validation is besides necessary.

---

Required

Use the HTML5 attribute required to specify that the input land must live filled out:

Example

The input land is required:

<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>

<p>The input's valid the world is:</p>
<h1>{{myForm.myInput.$valid}}</h1>

E-mail

Use the HTML5 type email to specify that the value must live an e-mail:

Example

The input land has to live an e-mail:

<form name="myForm">
<input name="myInput" ng-model="myInput" type="email">
</form>

<p>The input's valid the world is:</p>
<h1>{{myForm.myInput.$valid}}</h1>

---

Form State in addition to Input State

AngularJS is constantly updating the the world of both the shape in addition to the input fields.
Input fields guide keep the next states:

• $untouched The land has non been touched yet
• $touched The land has been touched
• $pristine The land has non been modified yet
• $dirty The land has been modified
• $invalid The land content is non valid
• $valid The land content is valid

They are all properties of the input field, in addition to are either true or false.
Forms guide keep the next states:

• $pristine No fields guide keep been modified yet
• $dirty One or to a greater extent than guide keep been modified
• $invalid The shape content is non valid
• $valid The shape content is valid
• $submitted The shape is submitted

They are all properties of the form, in addition to are either true or false.
You tin exercise these states to exhibit meaningful messages to the user. Example, if a land is required, in addition to the user leaves it blank, yous should laissez passer on the user a warning:

Example

Show an fault message if the land has been touched AND is empty:

<input name="myName" ng-model="myName" required>
<span ng-show="myForm.myName.$touched && myForm.myName.$invalid">The advert is required.</span>

---

CSS Classes

AngularJS adds CSS classes to forms in addition to input fields depending on their states.
The next classes are added to, or removed from, input fields:

• ng-untouched The land has non been touched yet
• ng-touched The land has been touched
• ng-pristine The land has non been  modified yet
• ng-dirty The land has been modified
• ng-valid The land content is valid
• ng-invalid The land content is non valid
• ng-valid-key One key for each validation. Example: ng-valid-required, useful when in that place are to a greater extent than than 1 affair that must live validated
• ng-invalid-key Example: ng-invalid-required

The next classes are added to, or removed from, forms:

• ng-pristine No fields has non been modified yet
• ng-dirty One or to a greater extent than fields has been modified
• ng-valid The shape content is valid
• ng-invalid The shape content is non valid
• ng-valid-key One key for each validation. Example: ng-valid-required, useful when in that place are to a greater extent than than 1 affair that must live validated
• ng-invalid-key Example: ng-invalid-required

The classes are removed if the value they stand upwardly for is false.
Add styles for these classes to laissez passer on your application a ameliorate in addition to to a greater extent than intuitive user interface.

Example

Apply styles, using criterion CSS:

<style>

input.ng-invalid {
    background-color: pink;
}
input.ng-valid {
    background-color: lightgreen;
}

</style>

Forms tin besides live styled:

Example

Apply styles for unmodified (pristine) forms, in addition to for modified forms:

<style>

form.ng-pristine {
    background-color: lightblue;}
form.ng-dirty {
    background-color: pink;}

</style>

---

Custom Validation

To practice your ain validation business office is a chip to a greater extent than tricky; You guide keep to add together a novel directive to your application, in addition to bargain amongst the validation within a business office amongst certainly specified arguments.

Example

Create your ain directive, containing a custom validation function, in addition to refer to it yesteryear using my-directive.
The land volition solely live valid if the value contains the grapheme "e":

<form name="myForm">
<input name="myInput" ng-model="myInput" required my-directive>
</form>

<script>

var app = angular.module('myApp', []);
app.directive('myDirective', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attr, mCtrl) {
      function myValidation(value) {
        if (value.indexOf("e") > -1) {
          mCtrl.$setValidity('charE', true);
        } else {
          mCtrl.$setValidity('charE', false);
        }
        return value;
      }
      mCtrl.$parsers.push(myValidation);
    }
  };
});

</script>

Example Explained:

In HTML, the novel directive volition live referred to yesteryear using the attribute my-directive.
In the JavaScript nosotros get-go yesteryear adding a novel directive named myDirective.
Remember, when naming a directive, yous must exercise a camel instance name, myDirective, but when invoking it, yous must exercise - separated name, my-directive.
Then, supply an object where yous specify that nosotros require  ngModel, which is the ngModelController.
Make a linking business office which takes merely about arguments, where the 4th argument, mCtrl, is the ngModelController,
Then specify a function, inwards this instance named myValidation, which takes 1 argument, this declaration is the value of the input element.
Test if the value contains the missive of the alphabet "e", in addition to develop the validity of the model controller to either true or false.
At last, mCtrl.$parsers.push(myValidation); volition add together the myValidation business office to an array of other functions, which volition live executed every fourth dimension the input value changes.

---

Validation Example

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<h2>Validation Example</h2>

<form  ng-app="myApp"  ng-controller="validateCtrl"
name="myForm" novalidate>

<p>Username:<br>
  <input type="text" name="user" ng-model="user" required>
  <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
  <span ng-show="myForm.user.$error.required">Username is required.</span>
  </span>
</p>

<p>Email:<br>
  <input type="email" name="email" ng-model="email" required>
  <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
  <span ng-show="myForm.email.$error.required">Email is required.</span>
  <span ng-show="myForm.email.$error.email">Invalid electronic mail address.</span>
  </span>
</p>

<p>
  <input type="submit"
  ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
  myForm.email.$dirty && myForm.email.$invalid">
</p>

</form>

<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
    $scope.user = 'John Doe';
    $scope.email = 'john.doe@gmail.com';
});</script>

</body>
</html>

The HTML shape attribute novalidate is used to disable default browser validation.

Example Explained

The AngularJS directive ng-model binds the input elements to the model.
The model object has 2 properties: user in addition to email.
Because of ng-show, the spans amongst color:red are displayed solely when user or electronic mail is $dirty in addition to $invalid.

---