检查所有表单字段的唯一值

Question

我有一个由表单组组成的表单数组。如何检查创建的表单组内的字段是否唯一。

我有这个表格：

form: FormGroup = this.formBuilder.group({
  fields: this.formBuilder.array([]),
});

private createField() {
  return this.formBuilder.group({
    label: ['', [Validators.required, uniqueLabelsValidator()]],
  });
}

public addField() {
  (this.form.get('fields') as FormArray).push(this.createField());
}

如何检查“字段”内的所有“标签”是否唯一，如果情况并非如此，则将验证错误分配给具有重复值的字段

Answer 1

您可以考虑使用 @rxweb/reactive-form-validators 库。

参考：唯一验证

1. 将

   RxReactiveFormsModule

   导入到应用程序模块或独立组件中。

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

2. 将

   RxwebValidators.unique()

   验证与

   message

   （可选）添加到表单控件中。

private createField() {
  return this.formBuilder.group({
    label: ['', [Validators.required, RxwebValidators.unique({ message: "Label must be unique." })]],
  });
}

3. 以 HTML 形式呈现唯一的验证消息。

<small
  class="form-text text-danger"
  *ngIf="getField(i).controls['label'].errors"
>
  {{getField(i).controls["label"].errors?.["unique"]?.message}}
</small>

演示@StackBlitz