Form Validation Inside Angular Material Table (MatTable) In Angular 9

Recently while working on one of my projects there was a requirement for me to have an Excel-like editing feature on my page. Also it should be able to handle validations if user doesn't provide any required field data. The tech stack we'd used for building this application is Angular 9. We also had used Angular material for creating the table. So here is the simple approach we took. On page render we loaded the mat table with all the data we had, by providing appropriate user controls depending on field type. For instance, for fields such as name we would render Textbox control, but for control such as DOB we would render DatePicker control etc. For this simple demo we'll consider that all of the fields are required. However in the next article we'll try to make it more dynamic; i.e. fields information would come from an external configuration file. You can try to link it with scenarios like the field information is coming from some Sharepoint list. That's going to be the next article in the queue.

Here is the sample output for the current article we are trying to develop,

For this current article, we would use dummy JSON data, I've defined one EmployeeDataStore service which provides our JSON data. Here is our Employee model,

Employee.model.ts

export class Employee {
photo: string;
name: string;
email: string;
address: string;
dob: string;
gender: string;
}

Here is the code snippet for EmployeeDataStore service. In real applications this is going to be the service which will invoke the actual rest api call.

EmployeeDataStore.service.ts

import {
Employee
} from '../models/employee.model';
import {
Injectable
} from '@angular/core';
@Injectable()
export class EmployeeDataStoreService {
private eData: Employee[] = [];
public getEmployees() {
const json = `[
{
"photo": "http://placehold.it/32x32",
"age": 25,
"name": "Aimee Weeks",
"gender": "female",
"email": "[email protected]",
"dob": "11/08/1988",
"address": "842 Java Street, Kapowsin, Mississippi, 8052"
},
{
"photo": "http://placehold.it/32x32",
"age": 22,
"name": "Vicky Avery",
"gender": "female",
"email": "[email protected]",
"dob": "08/11/1988",
"address": "803 Vanderveer Street, Remington, South Carolina, 1829"
},
{
"photo": "http://placehold.it/32x32",
"age": 30,
"name": "Cleveland Vance",
"gender": "male",
"email": "[email protected]",
"dob": "21/12/1986",
"address": "397 Hamilton Walk, Loretto, Massachusetts, 1096"
},
{
"photo": "http://placehold.it/32x32",
"age": 40,
"name": "Craft Frost",
"gender": "male",
"email": "[email protected]",
"dob": "02/02/1970",
"address": "519 Arlington Place, Waukeenah, Delaware, 4549"
},
{
"photo": "http://placehold.it/32x32",
"age": 23,
"name": "Debbie Blevins",
"gender": "female",
"email": "[email protected]",
"dob": "02/05/1980",
"address": "855 Hinckley Place, Edmund, Virginia, 6139"
},
{
"photo": "http://placehold.it/32x32",
"age": 27,
"name": "Woodard Lott",
"gender": "male",
"email": "[email protected]",
"dob": "30/01/1982",
"address": "865 Karweg Place, Johnsonburg, Utah, 4270"
}
]`;
this.eData = JSON.parse(json);
return this.eData;
}
}

Here is our app.component.html file wherein we defined the UI of our application,

<form #testForm="ngForm" (ngSubmit)="testForm.form.valid" novalidate>
<mat-card>
<mat-card-header>
<mat-card-title>Angular 9 Template Driven Form</mat-card-title>
<mat-card-subtitle>Mat Table Validation</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<mat-table [dataSource]="elistMatTableDataSource">
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef>
Name
</mat-header-cell>
<mat-cell *matCellDef="let employee; let rowIdx = index;">
<mat-form-field>
<mat-label></mat-label>
<input matInput #name="ngModel" name="txtName{{rowIdx}}" placeholder="Name" [(ngModel)]="employee.name"
required>
<mat-error *ngIf="name?.invalid">
<div *ngIf="name.errors.required">Name is required</div>
</mat-error>
</mat-form-field>
</mat-cell>
</ng-container>
<ng-container matColumnDef="email">
<mat-header-cell *matHeaderCellDef>
Email
</mat-header-cell>
<mat-cell *matCellDef="let employee; let rowIdx = index;">
<mat-form-field>
<mat-label></mat-label>
<input matInput #email="ngModel" name="txtEmail{{rowIdx}}" placeholder="Email"
[(ngModel)]="employee.email" required>
<mat-error *ngIf="email?.invalid">
<div *ngIf="email.errors.required">Email is required</div>
</mat-error>
</mat-form-field>
</mat-cell>
</ng-container>
<ng-container matColumnDef="address">
<mat-header-cell *matHeaderCellDef>
Address
</mat-header-cell>
<mat-cell *matCellDef="let employee; let rowIdx = index;">
<mat-form-field>
<mat-label></mat-label>
<input matInput #address="ngModel" name="txtAddress{{rowIdx}}" placeholder="Address"
[(ngModel)]="employee.address" required style="text-overflow: ellipsis;">
<mat-error *ngIf="address?.invalid">
<div *ngIf="address.errors.required">Address` is required</div>
</mat-error>
</mat-form-field>
</mat-cell>
</ng-container>
<ng-container matColumnDef="dob">
<mat-header-cell *matHeaderCellDef>
Dob
</mat-header-cell>
<mat-cell *matCellDef="let employee; let rowIdx = index;">
<mat-form-field>
<mat-label></mat-label>
<input matInput #dob="ngModel" name="txtDob{{rowIdx}}" placeholder="DOB"
[ngModel]="employee.dob | date:'yyyy-MM-dd'" (ngModelChange)="employee.dob = $event" [max]="todaysDate"
required [matDatepicker]="picker">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
<mat-error *ngIf="dob?.invalid">
<div *ngIf="dob.errors.required">Date Of Birth is required</div>
</mat-error>
</mat-form-field>
</mat-cell>
</ng-container>
<ng-container matColumnDef="gender">
<mat-header-cell *matHeaderCellDef>
Gender
</mat-header-cell>
<mat-cell *matCellDef="let employee; let rowIdx = index;">
<mat-form-field>
<mat-label></mat-label>
<mat-select matInput #gender="ngModel" name="ddlGender{{rowIdx}}" placeholder="Gender"
[(ngModel)]="employee.gender" required>
<mat-option value="female">Female</mat-option>
<mat-option value="male">Male</mat-option>
<mat-option value="others">Others</mat-option>
</mat-select>
<mat-error *ngIf="gender?.invalid">
<div *ngIf="gender.errors.required">Gender is required</div>
</mat-error>
</mat-form-field>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns; let i = index;"></mat-row>
</mat-table>
</mat-card-content>
<mat-card-actions>
<button mat-raised-button color="primary" [disabled]="testForm.invalid" (click)="save(testForm);">SAVE</button>
</mat-card-actions>
</mat-card>
</form>

Finally our app.component.ts file,

import {
Component,
OnInit
} from '@angular/core';
import {
MatTableDataSource
} from '@angular/material/table';
import {
NgForm
} from '@angular/forms';
import {
Employee
} from './models/employee.model';
import {
EmployeeDataStoreService
} from './data-store/employee-data-store.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'table-validation-demo';
elistMatTableDataSource = new MatTableDataSource < Employee > ();
displayedColumns: string[];
todaysDate: Date;
constructor(private eDataStore: EmployeeDataStoreService) {
this.displayedColumns = ['name', 'address', 'email', 'dob', 'gender'];
this.todaysDate = new Date();
}
ngOnInit() {
this.elistMatTableDataSource.data = this.eDataStore.getEmployees();
}
save(form: NgForm): void {
console.log('Form Status', form.valid);
console.log('Form Touched', form.touched);
console.log('Form Untouch', form.untouched);
console.log('Form Invalid', form.invalid);
console.log('Form Pristine', form.pristine);
// do API operation
}
}

Finally just run the application & you can see our validations working.