Validate duplicate input based on formArray in Angular by rxweb

Issue

How to validate duplicate OwnerId in formArray. I am trying install this @rxweb/reactive-form-validators but it not working. This my demo code Stackblitz

HTML:

<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 d-flex" [formGroupName]="i"
      *ngFor="let driver of nameDriverControl.controls; let i=index">
      <label>{{i+1}}.Name</label>
      <input class="form-control" type="text" id="name" name="name{{i}}"  formControlName="name" ><br/>
      <label>{{i+1}}.Owner Id</label>
      <input class="form-control" type="text" id="ownerId" name="ownerId{{i}}" inputmode="numeric" dashFormat formControlName="ownerId" maxLength="14">
      <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
        <div class="form-group mb-0" *ngIf="i !== 0">

          <button class="btn btn-danger" (click)="removeDriver(i)">
      Delete
    </button>
        </div>
        <div class="form-group mb-2">

          <button *ngIf="i >= 0 && i < 1" type="button" [hidden]="nameDriver.length > 3" (click)="addDriver()" class="btn btn-primary">
      Add
    </button>
        </div>
      </div>
    </div>

Component

createDriver () {
    return new FormGroup({
      name: new FormControl(null, Validators.required),
      ownerId: new FormControl(null, Validators.required)
    })
  }

Solution

You can use unique validator of last version of @rxweb/reactive-form-validators (2.1.3).

After installation you need to import @rxweb like this:

import { RxwebValidators } from '@rxweb/reactive-form-validators';

Then in your createDriver methods add unique validator for ownerId like this:

createDriver () {
    return new FormGroup({
      name: new FormControl(null, Validators.required),
      ownerId: new FormControl("", RxwebValidators.unique(
        { message: 'You must enter a unique OwnerId' }
      ))
    })
}

And in your HTML template you can add error message like this:

<small class="form-text text-danger" *ngIf="driver.controls.ownerId.errors">{{driver.controls.ownerId.errors.unique.message}}<br/></small>  

Here is working sample that I've created for you: StackBlitzLink

And the result:

See this for more information about unique validtion.

Answered By - Alireza Ahmadi