Form and Validations
How does Custom Validation Works in Angular2+?
Well its very simple ! Before going to deep inside lets understand how the form works in Angular.
We can create two types of forms in any angular application
1- Template Driven Forms
2- Modular Forms often called as Reactive Forms
Template Driven Forms
As the name perdicts something which is driven by template.These forms were quite common in AngularJs versions. A form is an Object which encapuslates form-controls and has its own state.
When I say form has state I mean to say that at any point of time a form can have states like Dirty, Pristine,Touched, Untouhced etc and also
it has some form controls registered with it, which are nothing but another object trecking the state and validity of elements and Form.
In template driven form we don't create the object of Form and Form-Controls manually instead Angular Compiler does this for us.
Creating of Objects is driven by template
for eg -
<html>
<body>
<form class="form-group" name="userForm">
<input class="form-control type="text" name="username" max-length="20"required>
<div class="error" ngIf="userForm.username.error.required">
Please enter Password.
</div>
<button type="submit" enabled="userForm.valid" >
</body>
</html>
In the form illustrated above there are 3 objects created for us
1-Form
2-FormControl with name username
3-FormControl with name password
When compiler create FormControl object for us it verifes whether there are any Validators on the element , in our case we do have 2 Validator for our element username and they are Maximum length and Mandatory. Compiler creates FormControl object and registers these two validator with Control , which are useful for tracking of Validity of Form.
So all I mean to say that creation of Objects(Forms and Controls) are driven my template, the Directives(Special markers on the Dom) in our case required and max-length stimulates the creation of FormControl Object and register the Validators with them.
** Modular Forms / Reactive Forms**
These forms are popular in Angular2+ versions ,here we have to create Form and FormControl Objects manually rather than Frameworks does for us.
<form [formGroup]="user">
<div>
<label>Username</label>
<input formControlName="username" type="text" placeholder="Enter Username">
<div class="error" ngIf="user.get('username').hasError('required')
&& user.get('username').touched" >
Username is Mandatory.
</div>
</div>
</form>
**
Here is how we create Object Manually*
user: FormGroup;
this.user = this.fb.group({
username: ['DefaultValue', Validators.required, Validators.maxLength(20)]
});
In the code above
1: We created a form named as user.
2: Created a form control named as username
3: Registered two validators with formcontrol that are Validators.required, Validators.maxLength(20)
If you look carefully at HTML synatax you would find that we haven't written any special directive inside input tag as we did in Template driven form
<input class="form-control type="text" name="username" max-length="20"required>
The template doesn't takes responsiility to create any object , all we do have to take care of Validation Logics and Form state.
Please feel free to correct for any erros , Thanks for reading.
