Amazing Form Validation by using AngularJS
AngularJS is a client side scripting language and it’s providing you an Amazing Form Validation. You don’t’ need write any too much of code for the form validations. AngularJS provides you set of inbuilt states of form, inputs and CSS classes. By using the state you can implement form Validation.
AngularJS always have the information about your form and input, if you bind the information, it will give you the exact state of form and inputs.
To know more about complete collection of Form Validation and other stuffs in AngularJS please visit AngularJS All Stuffs
Here you go for the lists of states,
Input elements having the following states,
- $untouched – Notifies about The field has not been touched yet.
- $touched – Notifies about The field has been touched.
- $pristine – Notifies about The field has not been modified yet.
- $dirty – Notifies about The field has been modified.
- $invalid – Notifies about The field is not valid.
- $valid – Notifies about The field is valid.
- $error – Notifies about whether field has any errors.
The above state values are Boolean values.
How to get input state values?
Getting the above state value is very easy, Here is the syntax.
{{YourFormName.YourInputName.$YourState}}
For Example,
{{formname.inputName.$touched}} – It will return true value, if the input box has been touched also return false value, if the box yet not been touched.
Same like the above you can try all the states.
Form having the following states,
- $pristine – Notifies about None of form fields have been modified yet.
- $dirty – Notifies about One or more form fields have been modified.
- $invalid – Notifies about The form content is not valid.
- $valid – Notifies about The form content is valid.
- $submitted – Notifies about The form is submitted.
The above form state values are Boolean values.
Getting the above form state value is very easy, Here is the syntax.
{{YourFormName.$YourState}}
For Example,
{{formname.$valid}} – It will return true value, if the form has valid content also return false value, if the form doesn’t meet the specifications.
Same like the above you can try all the states.
Explore more about AngulrJS, Here you go for complete topics of AngularJS Angularjs Complete Topics
