Angular 10 Tutorial - Form Validation

In this tutorial, we are going to learn about Form Validation in Angular 10. Form validations are an important aspect of programming. We use validations for two primary reasons: to prevent the user from entering wrong data and to show some proper value to the user, telling them to add the proper data. By using the Angular set of common validators like minlength, maxlength, required, and email, we can achieve this.

For validating controls in Angular, validator directives are used. So, let's see how we can validate a form in Angular 10.

Validating the Registration Form

So, switch to the project. In the previous tutorial, we created a registration form. Now, let's validate this form. First of all, add to the form:

<form #regForm="ngForm" (ngSubmit)="Registers(regForm)" novalidate>
    <h2 class="text-center">Registration Form</h2>
    <div class="form-group">
        <input type="text" class="form-control" required pattern="^[a-zA-Z]+$" #firstname="ngModel" placeholder="First Name" name="firstname" ngModel >
    </div>
    <div class="form-group">
        <input type="text" class="form-control" required pattern="^[a-zA-Z]+$" #lastname="ngModel" placeholder="Last Name" name="lastname" ngModel >
    </div>
    <div class="form-group">
        <input type="email" class="form-control" required email #email="ngModel" placeholder="Email" name="email" ngModel >
    </div>
    <div class="form-group">
        <input type="password" class="form-control" required minlength="6" #password="ngModel" placeholder="Password" name="password" ngModel >
    </div>
    <div class="form-group">
        <input type="text" class="form-control" required minlength="10" maxlength="13" pattern="^[0-9]+$" #phone="ngModel" placeholder="Phone" name="phone" ngModel >
    </div>
    <div class="text-center">
        <button type="submit" class="btn btn-primary">Register</button>
    </div>
</form>

Adding CSS Classes

Now, add some CSS classes. So, just go to the register.component.css file and just write:

input.ng-invalid{
    border-color:red;
}
input.ng-untouched{
    border-color:#ced4da;
}

Configuring Form Validation

Now, go to the register.component.ts file and here:

Registers(regForm:NgForm){
    if(regForm.valid)
    {
        this.data = regForm.value;
    }
}

Alright, one more thing. Inside the register.component.html file, here just add the ngIf:

<div *ngIf="data!=null">
    <h3>Submitted Data</h3>
    <p>First Name : {{data.firstname}}</p> 
    <p>Last Name : {{data.lastname}}</p> 
    <p>Email : {{data.email}}</p> 
    <p>Password : {{data.password}}</p> 
    <p>Phone : {{data.phone}}</p>
</div>

Testing Form Validation

Now, all set. So, let's check it. So, switch to the project and here, just enter an invalid name like any number. You can see the error border is showing. Now, add here correct input. Enter second name. Add the email, and if you add an invalid email, you can see the validation error is showing. Now, enter a correct email. Now, add a password. Now, enter a phone, and let's add any character. It's showing an error. And if I clicked on register, it will not be submitted. Now, enter a valid phone, and now click on register. You can see the form has been submitted successfully.

So, in this way, you can validate a form in Angular 10.