In Angular 2, the best way to deal with complex forms is by using Reactive forms. Below we are going to elaborate on how to trigger form validators for login page.
In reactive forms, we use FormControl and by using this, we get access to sub-fields of form and their properties. Some of their properties are dirty, touched, untouched, pristine, valid, errors and etc. Using these properties, we can actually trigger validations according to the requirement.
- Dirty: This property gets activated if the user changes the value of the sub-field from the default value.
- Touched: If the user visits the subfield then the touched property value is set to “true”.
- Untouched: If the user doesn’t visit the subfield then untouched property value is set to “true”. It is completely opposite to touched property.
- Pristine: If the user visits the sub-field and doesn’t make any change in its value then it is set to “true”.
- Valid: If the form fulfills all the form validations then it will be “true”.
- Errors: Angular on client-side generates a list of errors that contain all the inbuilt errors like required, maxLength, pattern, minLength, etc.
Using the above-discussed properties, we can trigger the form validations with custom messages. Using the FormControl of every sub-field and checking its properties like touched, dirty and etc, we can validate the form according to the need.
- First, add all the form controls in the component.ts file according to the .html file.
- Then add validations in component.ts file for the required subfields, Example: Required, Max Length, Pattern, etc.
- Make sure you imported everything from Validators from ‘angular@/forms’
- Then add validation messages in.html file which is demonstrated in the below code.
- Also, import all the dependencies from ‘angular@/material’ in the module file.
For better animations and styling angular provides Angular material which has abundant information regarding the styling. Using angular material, the form is styled. Hence, we are using tags like <mat-form-field>, <mat-error>, <mat-label> and matInput.
We can import from angular material after installing it using npm. The command for importing it is mentioned below:
ng add @angular/material
Code Implementation: Below is the implementation of the above approach.
Output: Hence, we have successfully triggered form validations.
- How to truncate text in Angular2?
- How to pass string to a component using Angular2 ?
- How to display images in Angular2 ?
- How to use ngIf without an extra element in Angular2?
- AngularJS vs Angular2 | Features and Comparison
- jQuery | trigger() Method
- How to trigger onchange event on input type=range while dragging in Firefox ?
- Difference between Trigger and Procedure in DBMS
- Trigger a keypress/keydown/keyup event in JS/jQuery
- How to trigger the window resize event in jQuery ?
- Design a form component which takes input from its user and displays a form
- TCL Full Form
- How to create a responsive Modal Sign-Up form for a Website?
- HTML | Responsive Modal Login Form
- HTML | Design Form
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.