In this video we are going to learn about Form Validation
Form Validations are an important aspect of programming.
We use validations for two primary reasons:
1. to prevent the user from entering the wrong data;
2. 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.
For Validating control in angular validator directives are used.
So let’s see how can we validate a form in angular 10
So switch the project
And In previous tutorial we have created this registration form
Now lets 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>

Now add some css class so just go to the register.component.css
And just write here

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

Now go to the 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>

Now all set so lets check it
So switch to the project
And here just enter invalid name like any number
You can see the error border is showing
Now add here correct input
Enter second name
Add the email if add the invalid email
You can see the validation error is showing
Now enter correct email
Now add password
Now enter phone lets add any character
Its showing error
And if I clicked on register it will be not submitted
Now enter the valid phone
And now click on register
You can see the form has been submitted successfully.
So in this way you validate the form in angular 10