how to show the duplicate error message in particular row based on duplicate input using angular12

here i am using template forms for binding the values under array and there is inline edit available for each row, issue is that, if i am giving duplicate for 3 rows under order number or the name, it shows error message in only one row and rest duplicate row is left without showing error message, and when changing the duplicate value to the correct value, then based on sorting the duplicate error message moves to the sorted place of the corrected value.

TS::

 //Duplicate check for order number public checkForDuplicate(event: any) { this.agentNotinView.map((x: any) => { x.error = false; }); var valueOrderNumArr = this.agentNotinView.map(function (item: any) { return +item.orderNum; }); var isDuplicate = valueOrderNumArr.some(function (item: any, idx: any) { return valueOrderNumArr.indexOf(item) != idx; }); if (isDuplicate) { event.error = true; } if (event.orderNum == null || event.orderNum == '') { this.disableSave = true; } this.agentNotinView = this.agentNotinView.sort( (a: any, b: any) => a.orderNum - b.orderNum ); } //Duplicate check for column display name public checkForNameDuplicate(event: any) { this.agentNotinView.map((x: any) => { x.colerror = false; }); var valueColNameArr = this.agentNotinView.map(function (item: any) { return item.columnDisplayName; }); var isDuplicate = valueColNameArr.some(function (item: any, idx: any) { return valueColNameArr.indexOf(item) != idx; }); if (isDuplicate) { event.colerror = true; } if (event.columnDisplayName == null || event.columnDisplayName == '') { this.disableSave = true; } } 

html:

 <div class="row"> <div class="col-9"> <input type="text" [(ngModel)]="customer.value" [ngModelOptions]="{ standalone: true }" (focusout)="checkForNameDuplicate(customer)" class="block form-control" /> <span *ngIf="customer.colerror" class="text-danger"> Duplicate Entry</span > <span *ngIf="customer.columnDisplayName == ''" class="text-danger" >Cannot be empty</span > </div> <div class="col-3"> <input type="text" [(ngModel)]="customer.order" [ngModelOptions]="{ standalone: true }" class="w-50 block form-control" (focusout)="checkForDuplicate(customer)" /> <span *ngIf="customer.error && customer.orderNum != ''" class="text-danger" > Duplicate Entry</span > <span *ngIf="customer.orderNum == ''" class="text-danger" >Cannot be empty</span > </div> </div> 

DEMO

so in this first image, i am not able to get duplicate error message in other place where i ave used same number and same name, basically if i have 3 duplicates, i need to show duplicate error message under 2 rows.

if there is any better approach also i am fine to go with it