Angular makes it easy to handle client-side form validations without much effort.
Adding required html5 tag to an input field validates whether the field is empty or not. This ensures that the field should have some value. The following syntax is used for required with input.
<input type="text" required />
Angular is constantly updating the state of both the form and the input fields.
We can get a reference to these form control instances in our template through the controls property of our myform model, for example, we can print out the dirty state of the input field like so:
<div>pristine : {{ courseNamecontrol.pristine }}</div>
<div>dirty : {{ courseNamecontrol.dirty }}</div>
dirty is true if the user has changed the value of the control.
The opposite of dirty is pristine so if we wrote:
This would be true if the user hasn’t changed the value, and false if the user has.
Touched & Untouched
Control is said to be touched if the user focused on the control and then focused on something else. For example by clicking into the control and then pressing tab or clicking on another control in the form.
The difference between touched and dirty is that with touched the user doesn’t need to actually change the value of the input control.
<div>touched : {{ courseNamecontrol.touched }}</div>
<div>untouched : {{ courseNamecontrol.untouched }}</div>
touched is true of the field has been touched by the user, otherwise, it’s false.
The opposite of touched is the property untouched.
Valid & Invalid
We can also check the valid state of the control with:
<div>valid : {{ courseNamecontrol.valid }}</div>
<div>invalid : {{ courseNamecontrol.invalid }}</div>
valid is true of the field doesn’t have any validators or if all the validators are passing.
Again the opposite of valid is invalid, so we could write:
This would be true if the control was invalid and false if it was valid.
Note: The above-stated property will also be applied to form.
The following code will be added in template-form.component.html for Form Validation.
<table
border="1"
style="border-collapse:collapse; font-family:Arial; table-layout: fixed"
>
<tr style="background-color:rgb(170, 120, 12); font-weight: bold">
<td colspan="3" style="padding:3px; white-space:nowrap; width:100%">
<h4>Field Validation</h4>
</td>
</tr>
<tr style="background-color:rgb(212, 149, 13); font-weight: bold">
<td style="padding:10px; white-space:nowrap; width:33%">
<div>touched : {{ courseNamecontrol.touched }}</div>
<div>untouched : {{ courseNamecontrol.untouched }}</div>
</td>
<td style="padding:10px; white-space:nowrap; width:33%">
<div>pristine : {{ courseNamecontrol.pristine }}</div>
<div>dirty : {{ courseNamecontrol.dirty }}</div>
</td>
<td style="padding:10px; white-space:nowrap; width:33%">
<div>valid : {{ courseNamecontrol.valid }}</div>
<div>invalid : {{ courseNamecontrol.invalid }}</div>
</td>
</tr>
</table>
<br /><br />
<table
border="1"
style="border-collapse:collapse; font-family:Arial; table-layout: fixed"
>
<tr style="background-color:rgb(170, 120, 12); font-weight: bold">
<td colspan="3" style="padding:3px; white-space:nowrap; width:100%">
<h4>FORM Validation</h4>
</td>
</tr>
<tr style="background-color:rgb(212, 149, 13); font-weight: bold">
<td style="padding:10px; white-space:nowrap; width:33%">
<div>touched : {{ myform.touched }}</div>
<div>untouched : {{ myform.untouched }}</div>
</td>
<td style="padding:10px; white-space:nowrap; width:33%">
<div>pristine : {{ myform.pristine }}</div>
<div>dirty : {{ myform.dirty }}</div>
</td>
<td style="padding:10px; white-space:nowrap; width:33%">
<div>valid : {{ myform.valid }}</div>
<div>invalid : {{ myform.invalid }}</div>
</td>
</tr>
</table>
</div>
</div>
</div>