0
364
ViewsValidate duplicate input based on formArray in Angular by rxweb
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)
})
}
·
Santiago Trujillo
1 answers
Answer question0
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.
·
Santiago Trujillo
Report
Answer question