How to Validate Data in AngularJS ?
In this article, we will know to validate the data in Angular JS, along with understanding the various ways to validate the data through the examples.
AngularJS allows client-side form validation. Form validation is necessary because it ensures that the data in the form is correct, complete, and are entered in the right manner, before submitting the form and sending details to the server. To validate the data, we need to validate both the form and the input fields and notify the user about the current state accordingly. If the user enters data in the wrong format, he should be notified about the same instead of submitting the wrong details.
For instance, if the user is asked to enter the phone number and the user enters “abcde”, the user should be asked to enter the phone number again and should be notified that only digits are allowed in this field. By performing form validation on the client-side, we ensure that correct and complete data is sent to the server.
There are several input controls that can be used in AngularJS form, which are given below:
- input: It is used to get input data from the form in various types such as text, password, email, etc by changing its type.
<input type="text" name="name">
- select: It is used to create a drop-down list.
<select> <option>1</option> <option>2</option> </select>
- button: It defines a clickable button to control other elements or execute a functionality.
- textarea: It is used to get input long text content.
AngularJS includes the following validation directives:
- ng-required: It can be used to put the required attribute on an input field,
- ng-minlength: It can be used to put the minimum length attribute on the input field,
- ng-maxlength: It can be used to put the maximum length attribute on the input field,
- ng-pattern: It can be used to put the pattern validation error key if the ngModel value doesn’t match the RegEx expression.
Example 1: This example describes the Form validation using validation directives
Explanation: In the above example, we have made a contact us form. The name of the form is ‘formname’. There are four fields in the form: name, phone, email, and message. We have used validation directives to validate the data entered by the user.
For the name, we have used the ng-required directive which means it is compulsory to enter the name, ng-pattern which has a regular expression for allowing only alphabets and space in the name, ng-minlength for ensuring that name has at least 3 characters, ng-maxlength for the maximum number of characters allowed in the name. We have used the directive ng-show directive for displaying the messages accordingly. The ng-show directive displays a message if the condition is true. For example, if the user enters a name that doesn’t match the regular expression specified in the ng-pattern directive formname.name.$error.pattern” will be true therefore “ng-show=formname.name.$error.pattern” will print the message “Name can have only alphabets”. Here we have used the $error object which contains the validation attributes that are applied to an element. Similarly, all the other fields: phone, email, the message have been validated.
There are 2 ways for validating data in AngularJS. The first method is by using validation control states which include the form state and input state. The other method is using CSS classes.
Form State and Input State: The state of the form and the input fields are updated by AngularJS and these states are used to show useful messages to the user.
Input fields have the following states:
- $untouched: The field has not been touched yet
- $touched: The field has been touched
- $pristine: The field has not been modified
- $dirty: The field has been modified
- $valid: The field content is valid
- $invalid: The field content is invalid
Forms have the following states:
- $pristine: No fields have been modified yet
- $dirty: One or more fields have been modified
- $invalid: The form content is not valid
- $valid: The form content is valid
- $submitted: The form is submitted
These properties can be either true or false.
Example 2: This example describes the Form validation using form and field states.
Explanation: In the above example we have used field states for validation. For the name we used ng-show = “formname.name.$touched && formname.name.$error.required ” which means if the field has been touched but the field is still empty the message “Name is required and can have only alphabets” is printed.
For phone number, we have used ng-show = “formname.phone.$invalid && formname.phone.$touched” which means if the field is touched and whatever the user entered is not valid then the required message is printed. Similarly, we have validated the email and message fields.
We have disabled the button if the condition “formname.$invalid” is true which means if any field in the form has invalid data the button will not be enabled. If data entered in all the fields are valid then the button will be enabled.
CSS classes for form validation: To allow styling of form as well as controls, ng-model adds CSS classes.
The following classes are added to or removed from the input field:
- ng-untouched: Field has not been touched yet
- ng-touched: Field has been touched
- ng-pristine: Field has not been modified
- ng-dirty: Field has been modified
- ng-valid: Field content is valid
- ng-invalid: Field content is invalid
The following classes are added to or removed from forms:
- ng-pristine: No fields have not been modified yet
- ng-dirty: One or more fields have been modified
- ng-valid: The form content is valid
- ng-invalid: The form content is not valid
Example 3: In this example, we are adding style to form and fields using CSS classes.
Explanation: In the above example we have used CSS classes to add style to the input controls and the form. Initially, the color of the form is red. For the input fields, if the user enters data that is invalid the color of the input control will change to red. If the user has not touched or modified the field its color will remain pink. If the user has touched the field but did not enter anything its color changes to red. If the user enters data that is valid its color changes to green. When all the fields have data that is valid the color of the form changes to green.
Example 4: In this example, we are creating the Registration Form by specifying the different validation checks.
Please Login to comment...