rxweb 根据 Angular 中的 formArray 验证重复输入答案

【问题标题】：Validate duplicate input based on formArray in Angular by rxwebrxweb 根据 Angular 中的 formArray 验证重复输入
【发布时间】：2021-10-23 18:12:06
【问题描述】：

如何验证formArray 中的重复OwnerId。我正在尝试安装这个@rxweb/reactive-form-validators，但它不起作用。这是我的演示代码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>

组件

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

【问题讨论】：

stackoverflow.com/questions/58577133/…
我检查了您的Stackblitz 链接，但您似乎没有使用@rxweb/reactive-form-validators 对吧？
是的，是一个“简单”的自定义验证器
我使用了@rxweb/reactive-form-validators，但它并没有达到我想要的效果。

标签： html angular typescript angular-reactive-forms formarray

【解决方案1】：

您可以使用@rxweb/reactive-form-validators (2.1.3) 最新版本的unique 验证器。

安装后你需要像这样导入@rxweb：

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

然后在您的 createDriver 方法中为 ownerId 添加 unique 验证器，如下所示：

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

在您的 HTML 模板中，您可以添加如下错误消息：

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

这是我为您创建的工作示例：StackBlitzLink

结果：

有关unique 验证的更多信息，请参阅this。

【讨论】：