Angular Comes with Validation Modules Like Template Driven, Reactive and Dynamic Form.Today we will take a look at Template driven Validations.

Template Driven Angular Validations are Simplest form of all validations and it is Used to Conduct the form validation of simplest sort.

I will walk you through a simple form validation where a user will have to will fill in employee details before hitting on submit button.

The form will consist of Employee Name, Employee Number and Employee Start Date.

All three fields are required in order to submit employee details. If the user hits save without entering the required fields, all the fields should lighten up and throw out validation error messages.

When everything required is entered, you can save the form.

Register the Form with NgForm

We attach the form name which is empolyeeDetailsForm to form which encapsulates all the three fields within itself.

Register Each of the Form Elements To Track and validate the Element.

Once we register the form to ngForm, we need to register each of our fields with angular form which we created on form element.

This is done by giving the name of the element and specifying the name with ngModel attribute as shown below. Also don’t forget to add required attribute to each of the fields.

name="employeeName" #employeeName="ngModel"

name="employeeNumber" #employeeNumber="ngModel"

name="employeeStartdate" #employeeStartdate="ngModel"

This registers each element to angular form.

Track control, Determine and Show the validation Message.

Now we need to know whether each of our element is invalid and touched, so that we can determine the state of the element. It can be tracked by using form properties like invalid or touched and show the validation messages accordingly. Please bear in mind that we don’t have $prepended to each of the properties as it used to be in doppelgängers of legacy angular (angular js).

We use these properties to show the validation message below the element name. Note that we have validation class where it carries red color to show the text in red. You can use your own custom class to meet your requirement to display a validation message.

<span *ngIf="(employeeName.invalid && employeeName.touched)" class="validation">

Employee Name is required

</span> <span *ngIf="(employeeNumber.invalid && employeeNumber.touched)" class="validation">

Employee Number is required

</span> <span *ngIf="(employeeStartdate.invalid && employeeStartdate.touched)" class="validation">

Employee Start Date is required

</span>

Is That it?

But wait, what happens when the User clicks on Submit Button without playing or touching with fields?

This is where we use markAsTouched() to lighten up the form and prompt the user that they can’t get away with such a smart trick.

public submit(employeeDetailsForm) {

if (employeeDetailsForm) {

this.submitted = true;

}

else {

for (const i in this.employeeDetailsForm.controls) {

if (employeeDetailsForm.controls[i]) {

employeeDetailsForm.controls[i].markAsTouched();}

}

}

The Source code for demo can be found at the following Link. please feel free to leave any comment or question you have.

If you like the article and found it useful please Don’t forgot to click on clap button.

References