WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

AngularJS Form Validation


AngularJS can approve input data.


Form Validation

AngularJS offers customer side structure validation.

AngularJS screens the condition of the structure and information fields (input, textarea, select), and gives you a chance to inform the client about the current state.

AngularJS likewise holds data about whether they have been contacted, or adjusted, or not.

You can utilize standard HTML5 credits to approve information, or you can make your own approval functions.


Max Length

Use the ng-maxlength mandate to check if an info field has more than a predetermined number of characters:

Example

Limit the greatest number of characters to 5:

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

<p>The info's legitimate state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>

Min Length

Use the ng-minlength order to check if an information field has no less than a predetermined number of characters:

Example

The least number of characters is 5:

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

<p>The info's legitimate state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
- >

Required

Use the HTML5 property required to determine that the info field must be filled out:

Example

The input field is required:

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

<p>The information's substantial state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
Try it Yourself »

E-mail

Use the HTML5 type email to determine that the esteem must be an e-mail:

Example

The input field must be an e-mail:

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

<p>The info's legitimate state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
Try it Yourself »

Form State and Input State

AngularJS is always refreshing the condition of both the structure and the information fields.

Input fields have the accompanying states:

  • $untouched The field has not been contacted yet
  • $touched The field has been touched
  • $pristine The field has not been altered yet
  • $dirty The field has been modified
  • $invalid The field content isn't valid
  • $valid The field content is valid

They are largely properties of the info field, and are either true or on the other hand false.

Forms have the accompanying states:

  • $pristine No fields have been changed yet
  • $dirty at least one have been modified
  • $invalid The structure content isn't valid
  • $valid The structure content is valid
  • $submitted The structure is submitted

They are largely properties of the structure, and are either true or on the other hand false.

You can utilize these states to indicate important messages to the client. Precedent, if a field is required, and the client abandons it clear, you should give the client a warning:

Example

Show a mistake message if the field has been contacted AND is empty:

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

CSS Classes

AngularJS adds CSS classes to structures and info fields relying upon their states.

The following classes are added to, or expelled from, input fields:

  • ng-untouched The field has not been contacted yet
  • ng-touched The field has been touched
  • ng-pristine The field has not been  adjusted yet
  • ng-dirty The field has been modified
  • ng-valid The field content is valid
  • ng-invalid The field content isn't valid
  • ng-legitimate key One key for every approval. Precedent: ng-substantial required, helpful when there are mutiple thing that must be validated
  • ng-invalid-key Example: ng-invalid-required

The following classes are added to, or expelled from, forms:

  • ng-pristine No fields has not been adjusted yet
  • ng-dirty at least one fields has been modified
  • ng-valid The structure content is valid
  • ng-invalid The structure content isn't valid
  • ng-substantial key One key for every approval. Model: ng-substantial required, helpful when there are mutiple thing that must be validated
  • ng-invalid-key Example: ng-invalid-required

The classes are evacuated if the esteem they speak to is false.

Add styles for these classes to give your application a better and progressively instinctive client interface.

Example

Apply styles, utilizing standard CSS:

<style>
input.ng-invalid {
    foundation shading: pink;
}
input.ng-legitimate {
    foundation shading: lightgreen;
}
</style>
Try it Yourself »

Forms can likewise be styled:

Example

Apply styles for unmodified (unblemished) shapes, and for adjusted forms:

<style>
form.ng-unblemished {
    foundation shading: lightblue;
}
form.ng-grimy {
    foundation shading: pink;
}
</style>
Try it Yourself »

Custom Validation

To make your own approval work is more dubious. You need to include a new mandate to your application, and manage the approval inside a work with certain predefined arguments.

Example

Create your own mandate, containing a custom approval work, and allude to it by utilizing my-directive.

The field may be legitimate if the esteem contains the character "e":

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

<script>
var application = angular.module('myApp', []);
app.directive('myDirective', work() {
  return {
    require: 'ngModel',
    interface: function(scope, component, attr, mCtrl) {
      work myValidation(value) {
        if (value.indexOf("e") > - 1) {
          mCtrl.$setValidity('charE', true);
        } else {
          mCtrl.$setValidity('charE', false);
        }
        return value;
      }
      mCtrl.$parsers.push(myValidation);
    }
  };
});
</script>
Try it Yourself »

Example Explained:

In HTML, the new order will be alluded to by utilizing the characteristic my-directive.

In the JavaScript we begin by including another mandate named myDirective.

Remember, when naming an order, you should utilize a camel case name, myDirective, however while conjuring it, you should utilize - isolated name, my-directive.

Then, return an item where you indicate that we require  ngModel, which is the ngModelController.

Make a connecting capacity which takes a few contentions, where the fourth contention, mCtrl, is the ngModelController,

Then indicate a capacity, for this situation named myValidation, which takes one contention, this contention is the estimation of the info element.

Test if the esteem contains the letter "e", and set the legitimacy of the model controller to either true or false.

At last, mCtrl.$parsers.push(myValidation); will include the myValidation capacity to a variety of different capacities, which will be executed each time the information esteem changes.


Validation Example

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/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 email 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 application = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
    $scope.user = 'John Doe';
    $scope.email = 'john.doe@gmail.com';
});
</script>

</body>
</html>
Try it Yourself »

Example Explained

The AngularJS mandate ng-model ties the info components to the model.

The show object has two properties: user and email.

Because of ng-show, the ranges with color:red are shown as it were whenever client or email is $dirty and $invalid.