I have a <mat-select> element in my Angular 7 project with an ngFor loop that displays rows from a table. I need to implement validation for the "type" column, allowing only one key to be selected at a time and preventing users from selecting "key" multiple times in the dropdown.
// HTML Code (Angular 7)
<!-- Column for Type-->
<ng-container matColumnDef="type">Type
<mat-header-cell *matHeaderCellDef mat-sort-header>Type</mat-header-cell>
<mat-cell *matCellDef="let element">
<mat-select placeholder="Select Type" [(ngModel)]="element.type" (selectionChange)="checkTypeValidation(element,element.type)">
<mat-option *ngFor="let type of typeColumn" [value]="type">
{{ type }}
<div *ngIf = "element.type === "></div>
</mat-option>
</mat-select>
</mat-cell>
</ng-container>
The current code allows selection of any row as a key without enforcing any validation restrictions.
I aim to restrict the selection so that only one row can have the type of "key":
// TypeScript Code
typeColumn = [
'None',
'Time',
'Segment',
'Key',
'Input',
'Quantile'
];
This TypeScript snippet defines the available options for the Type column's dropdown menu, ensuring only a single row can be marked as a key.