Form Validation In Angular 9

In this article, we will learn how to validate a form in Angular 9.

Before submitting data to the server, we must have to use Client-Side Form Validation to ensure all required form controls are filled out, in the correct format.

To add validation to an Angular form, we can use the same validation attributes as we use with HTML forms. Angular uses directives to match these attributes with validator functions in the framework.

When the value of a form control changes, Angular runs validation and generates a list of validation results (Invalid status or Valid status or NULL).

Prerequisites:

• Basic knowledge of Angular
• Code editor like Visual Studio Code

Create a new Angular project by typing the following command in the VSCode terminal.

ng new form-validation

Now please click the link given below and follow the steps to add Bootstrap 4 to Angular app for better and responsive design.

Add Bootstrap 4, jQuery and Font Awesome To Angular

Note: You must have to add jQuery because Bootstrap uses jQuery for JavaScript plugins.

Here, we are going to add Template-driven validation on the Angular form.

Open the app.module.ts file then add the FormsModule in the file.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Open the app.component.ts file and add the code in it.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'form-validation';

  name;
  email;
  mobile;
  password;

  register() {
    alert("Form Submitted");
  }

}

Now, just open the app.component.html and replace it with HTML given below.

<div class="container">
    <h2>Angular Form Validation</h2>
    <form (ngSubmit)="registerForm.valid && register()" #registerForm="ngForm">
        <div class="form-group">
            <label>Name:</label>
            <input class="form-control" placeholder="Enter Name" name="txtName" [(ngModel)]="name" #txtName="ngModel"
                [ngClass]="{ 'is-invalid': registerForm.submitted && txtName.invalid }" required>

            <div *ngIf="registerForm.submitted && txtName.invalid" class="text-danger">
                <h6 *ngIf="txtName.errors.required">
                    Name is Required
                </h6>
            </div>
        </div>
        <div class="form-group">
            <label>Email:</label>
            <input type="email" class="form-control" placeholder="Enter Email" name="txtEmail" [(ngModel)]="email"
                #txtEmail="ngModel" [ngClass]="{ 'is-invalid': registerForm.submitted && txtEmail.invalid }" required
                pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$">

            <div *ngIf="registerForm.submitted && txtEmail.invalid" class="text-danger">
                <h6 *ngIf="txtEmail.errors.required">
                    Email is Required
                </h6>
                <h6 *ngIf="txtEmail.errors.pattern">
                    Please Enter Valid Email Address
                </h6>
            </div>
        </div>
        <div class="form-group">
            <label>Mobile:</label>
            <input class="form-control" placeholder="Enter Mobile" name="txtMobile" [(ngModel)]="mobile"
                #txtMobile="ngModel" [ngClass]="{ 'is-invalid': registerForm.submitted && txtMobile.invalid }"
                maxlength="10" required pattern="^((\\+91-?)|0)?[0-9]{10}$">

            <div *ngIf="registerForm.submitted && txtMobile.invalid" class="text-danger">
                <h6 *ngIf="txtMobile.errors.required">
                    Mobile Number is Required
                </h6>
                <h6 *ngIf="txtMobile.errors.pattern">
                    Please Enter Valid Mobile Number
                </h6>
            </div>
        </div>
        <div class="form-group">
            <label>Password:</label>
            <input type="password" class="form-control" placeholder="Enter Password" name="txtPassword"
                [(ngModel)]="password" #txtPassword="ngModel"
                [ngClass]="{ 'is-invalid': registerForm.submitted && txtPassword.invalid }" maxlength="20" minlength="5"
                required>

            <div *ngIf="registerForm.submitted && txtPassword.invalid" class="text-danger">
                <h6 *ngIf="txtPassword.errors.required">
                    Password is Required
                </h6>
                <h6 *ngIf="txtPassword.errors.minlength">
                    Minimum 5 Characters Required
                </h6>
            </div>
        </div>
        <button class="btn btn-primary">Submit</button>
        <button type="reset" class="btn btn-outline-primary ml-2">Reset</button>
    </form>
</div>

That’s it.

Output:

Please give your valuable feedback and if you have any questions or issues about this article, please let me know.

Also, check Building Responsive Carousel Slider In Angular 9