HTML5 provides some attributes that can be used to validate the input fields.
required: required ensures that form field must not be empty.
[/html]
email: email ensures that form field value is in email format.
[/html]
Validating state of the form and input fields:
AngularJS provides a number of states for form and its controls.
Properties of the input fields:
$pristine – Returns true if input field is not modified.
$dirty – Returns true if input field is modified.
$invalid – Returns true if content input field is not valid.
$untouched – Returns true if input field is not touched yet.
$touched – Returns true if input field is touched.
$valid – Returns true if content of input field is valid.
States of Forms:
$valid – Returns true if content of the form is valid.
$invalid – Returns true if content of the form is invalid.
$pristine – Returns true if no form field is modified yet.
$dirty – Returns true if One or more fields of form have been modified.
$submitted – Returns true if form is submitted.
Lets understand with an example:
//$scope.click =1; $scope.tname = 'ravi'; $scope.email = 'ravi@yahoo.com'; } );
[/html]
Using CSS:
AngularJS applies CSS as per status of the control.
ng-pristine – Returns true if input field is not modified.
ng-dirty – Returns true if input field is modified.
ng-invalid – Returns true if content input field is not valid.
ng-untouched – Returns true if input field is not touched yet.
ng-touched – Returns true if input field is touched.
ng-valid – Returns true if content of input field is valid.
AngularJS applies CSS as per status of the FORM.
ng-valid – Returns true if content of the form is valid.
ng-invalid – Returns true if content of the form is invalid.
ng-pristine – Returns true if no form field is modified yet.
ng-dirty – Returns true if One or more fields of form have been modified.
for example:
[/html]
ng-valid–key – Returns true if content of the form is valid. For one or more than one controls.
ng-invalid–key – Returns true if content of the form is invalid. For one or more than one controls.
For below text box:
[/html]
CSS is:
.ng-valid[required] {
border-right: 3px solid RED;
}
[/html]
Example:
[/html]
For below text box:
[/html]
CSS is:
.ng-valid.required {
border-right: 3px solid RED;
}
[/html]
Example:
[/html]
A Noun is the name of a person, place or thing. or Name of anything is noun. For example: Sita…
Misko Hevery, a Google employee, developed AngularJS. First version 1.0 of AngularJS was released in 2012. Now AngularJS is fully…
AngularJS expressions contain operators,literals, and variables. AngularJS expressions can be written inside HTML while JavaScript expressions can't be. AngularJS expressions…
Some sentences are given below. Choose the nouns and mention the type of noun whether they are proper noun, common…
Modules are containers for appication controller. They contain different parts of an application. [html] {{ state + " " +…
Using Directives you can extend HTML attributes. In AngularJS you can define your own directives while it has its own…