manage Validation in Angular Template-driven forms
This Article helps you to Understand, How to manage Validation in Angular Template-driven forms?
In the template-driven approach we define the validators via directives and HTML5 attributes in our template itself
Validation Styling
We can access each model form controls state similarly to model-driven forms by going through the top-level form group. Through its form property, the ngForm directive makes the top-level FormGroup available to us.
The ? is called the elvis operator, it means:
Only try to call the property on the right of ? if the property on the left of ? is not null
We use the elvis operator in template-driven forms because the controls could occasionally be null while Angular is creating the page. Because the models are already constructed in our component by the time the HTML form is displayed on the page, we don't need to use this for model-driven forms.
In the code below, an incorrect input control has a red border, whereas a legitimate one has a green border.
Shorter Validation Expressions (to refer form elements in template itself)
Method 1:
We do have a shorthand for the controls property provided by the NgForm directive,
so we can write f.controls.email?.valid instead of f.form.controls.email?.valid. Reason being f itself represent FormControl the 'form' at top level.
Method 2:
However, using the ngModel directive gives us a far quicker option.
We may use a local template reference variable to access the instance of our ngModel directive as seen in the following example:
Now, In our template, we can then use our local variable email.
NgModel stored a reference of each element / control / FormControl in its control property, which we can now access in the template by using the syntax email.control.touched. This is because NgModel created the FormControl instance in the first place to manage the template form control.
Now, we can use the local variable 'email' in the template to directly access its form control. This so because, on this input control, we establish a template local variable that points to the instance of the ngModel directive.
We can simply reuse the same ngClass syntax, as long as we gave our local reference variables the same names as we gave our form controls in the model-driven version of this form:
Validation Messages
We can employ the exact same technique for form validation messages as we did for model-driven/react forms. We can use precisely the same HTML in our template-driven forms as long as we named the local reference variables the same as the form controls in the model-driven technique, as follows:
Resetting the Form
By using the function reset() on our myform model, we reset the form using the model-driven methodology. In our template-driven approach, we must accomplish the same thing, but our component does not provide us with access to the underlying form model. Through the local reference variable f.form in our template, we are the only ones with access to it.
By utilising a ViewChild decorator, we can obtain a reference to the ngForm instance in our component code.
Now, when we submit the form, it clears all the fields and resets the states of the form controls (by calling reset method on our form), restoring any styling or errors from the form's validation to their original perfect state.
