Angular Template Driven Forms Validation

By | | Updated : 2021-07-25 | Viewed : 89 times

Angular Template Driven Forms Validation

We will learn angular template-driven forms with validation with a simple example.

Angular Template Driven Forms Validation Example

We will first create the HTML file for writing the driven forms and validation. Notice below the given code for the same.

app.component.html
<div class="container">
  <div class="row">
    <div class="col-md-8 offset-md-2">
      <form (ngSubmit)="f.form.valid && onSubmit()" name="form" #f="ngForm" novalidate>
        <div class="form-group">
          <label for="firstName">First Name</label>
          <input #firstName="ngModel" [(ngModel)]="model.firstName" class="form-control" name="firstName" [ngClass]="{ 'is-invalid': f.submitted && firstName.invalid }" required
                 type="text"/>
          <div *ngIf="f.submitted && firstName.invalid" class="invalid-feedback">
                <div *ngIf="firstName.errors.required">First Name is required</div>
          </div>

        </div>
        <div class="form-group">
          <label for="lastName">Last Name</label>
          <input #lastName="ngModel" [(ngModel)]="model.lastName" class="form-control" name="lastName" [ngClass]="{ 'is-invalid': f.submitted && lastName.invalid }" required
                 type="text"/>
                 <div *ngIf="f.submitted && lastName.invalid" class="invalid-feedback">
                  <div *ngIf="lastName.errors.required">Last Name is required</div>
              </div>

        </div>
        <div class="form-group">
          <label for="email">Email</label>
          <input #email="ngModel" [(ngModel)]="model.email" class="form-control" email name="email" [ngClass]="{ 'is-invalid': f.submitted && email.invalid }" required
                 type="text"/>
                 <div *ngIf="f.submitted && email.invalid" class="invalid-feedback">
                  <div *ngIf="email.errors.required">Email is required</div>
              </div>

        </div>
        <div class="form-group">
          <label for="password">Password</label>
          <input #password="ngModel" [(ngModel)]="model.password" class="form-control" minlength="6" name="password"
          [ngClass]="{ 'is-invalid': f.submitted && password.invalid }" required type="password"/>
                 <div *ngIf="f.submitted && password.invalid" class="invalid-feedback">
                  <div *ngIf="password.errors.required">Password is required</div>
                  <div *ngIf="password.errors.minlength">Password must be at least 6 characters</div>
              </div>
        </div>

        <div class="form-group">
          <button class="btn btn-primary">Register</button>
        </div>
      </form>
    </div>
  </div>
</div>

Notice input controller contains ngClass for validation. When the input is invalid then the error will display in the below-given div.

Notice below the given code snippet for the same input field of firstName

Code snippet for firstName validation
          <input #firstName="ngModel" [(ngModel)]="model.firstName" class="form-control" name="firstName" [ngClass]="{ 'is-invalid': f.submitted && firstName.invalid }" required
                 type="text"/>
          <div *ngIf="f.submitted && firstName.invalid" class="invalid-feedback">
                <div *ngIf="firstName.errors.required">First Name is required</div>
          </div>

Write below the Typescript file for alerting the entire form message once the form is valid.

app.component.ts
import {Component} from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Angular-Template-Driven-Forms-Example-App1';
  model: any = {};

  onSubmit() {
    alert('SUCCESS!! :-)\n\n' + JSON.stringify(this.model))
  }

}

To know the entire repo for driven forms please find the Github repo here Angular-Template-DrivenForm-Validation-Example-App.

Leave A Reply