AngularJS | Form Validation - GeeksforGeeks

23 Apr, 2019
AngularJS performs form validation on the client-side. AngularJS monitors the state of the form and input fields (input, text-area, select), and notify the user about the current state. AngularJS also holds information about whether the input fields have been touched, modified, or not.Form input fields have the following states:
$untouched: It shows that field has not been touched yet.
$touched: It shows that field has been touched.
$pristine: It represents that the field has not been modified yet.
$dirty: It illustrates that the field has been modified.
$invalid:It specifies that the field content is not valid.
$valid:It specifies that the field content is valid.
These all are the properties of the input field which can be either true or false.Forms have the following states:
$pristine: It represents that the fields has not been modified yet.
$dirty: It illustrates that one or more fields has been modified.
$invalid:It specifies that the form content is not valid.
$valid:It specifies that the form content is valid.
$submitted:It specifies that the form is submitted.These all are the properties of the form which can be either true or false.This states can be used to show meaningful messages to the user.Example 1:<!DOCTYPE html><html><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>  <body ng-app=""><form name="form1"><p>Name:<input name="username" ng-model="username" required><span ng-show="form1.username.$pristine && form1.username.$invalid">The name is required.</span></p><p>Address:<input name="useraddress" ng-model="useraddress" required></p></form><p>We use the ng-show directive to only show the error message if the field has not modified yet AND content present in the field is invalid.</p></body></html>Output:Custom validation:To create your own validation function add a new directive to your application, and deal with the validation inside a function with certain specified arguments.Example 2:Create your own directive, containing a custom validation function, and refer to it by using app-directive. The field will only be valid if the value is greater than or equal to 18.<!DOCTYPE html><html><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>  <body ng-app="developapp"><form name="form1">Username:<input name="username" required><br><br>Age:<input name="userage" ng-model="userage" required app-directive></form>  <p>The input's valid state is:</p><h1>{{form1.userage.$valid}}</h1><script>var app = angular.module('developapp', []);app.directive('appDirective', function() {    return {        require: 'ngModel',        link: function(scope, element, attr, mCtrl) {            function myValidation(value) {                if (value >=18) {                    mCtrl.$setValidity('charE', true);                } else {                    mCtrl.$setValidity('charE', false);                }                return value;            }            mCtrl.$parsers.push(myValidation);        }    };});</script>  <p>The input field must have user age greater than 18 to be considered valid for voting.</p>  </body></html>Output:My Personal Notes
arrow_drop_upSave
These all are the properties of the form which can be either true or false.This states can be used to show meaningful messages to the user.Example 1:
<!DOCTYPE html><html><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>  <body ng-app=""><form name="form1"><p>Name:<input name="username" ng-model="username" required><span ng-show="form1.username.$pristine && form1.username.$invalid">The name is required.</span></p><p>Address:<input name="useraddress" ng-model="useraddress" required></p></form><p>We use the ng-show directive to only show the error message if the field has not modified yet AND content present in the field is invalid.</p></body></html>
Output:Custom validation:To create your own validation function add a new directive to your application, and deal with the validation inside a function with certain specified arguments.
Example 2:Create your own directive, containing a custom validation function, and refer to it by using app-directive. The field will only be valid if the value is greater than or equal to 18.
<!DOCTYPE html><html><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>  <body ng-app="developapp"><form name="form1">Username:<input name="username" required><br><br>Age:<input name="userage" ng-model="userage" required app-directive></form>  <p>The input's valid state is:</p><h1>{{form1.userage.$valid}}</h1><script>var app = angular.module('developapp', []);app.directive('appDirective', function() {    return {        require: 'ngModel',        link: function(scope, element, attr, mCtrl) {            function myValidation(value) {                if (value >=18) {                    mCtrl.$setValidity('charE', true);                } else {                    mCtrl.$setValidity('charE', false);                }                return value;            }            mCtrl.$parsers.push(myValidation);        }    };});</script>  <p>The input field must have user age greater than 18 to be considered valid for voting.</p>  </body></html>
Output:
Picked
AngularJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Angular File Upload
Angular PrimeNG Dropdown Component
Angular | keyup event
Auth Guards in Angular 9/10/11
How to Display Spinner on the Screen till the data from the API loads using Angular 8 ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills