如何检查 Angular 5 中反应形式的表单数组中是否存在重复的表单控件值？答案

【问题标题】：How to check duplicate formcontrol values exist in form arrays in reactive forms in angular5?如何检查 Angular 5 中反应形式的表单数组中是否存在重复的表单控件值？
【发布时间】：2018-08-29 05:43:44
【问题描述】：

我正在构建表单数组，例如

    this.myForm= this.fb.group({
  codes: this.fb.array([])
 })

 this.codes =   this.myForm.controls['newChargecodes']

  this.codes.push(this.fb.group({
     chargeCode: ['', [Validators.required]],
  })


  addRow () {
   this.codes.push(this.fb.group({
     chargeCode: ['', [Validators.required]],
  })

  }

  Html

  <tr *ngFor="let code of myForm.get('codes').controls; let i = index;" 
              [formGroupName]="i">
               <td class="text-center">
                  <input class="form-control input-text text-center" pInputText type="text" placeholder="{{columns['chargeCode']}}" id="chargeCode"
                    formControlName="chargeCode" name="chargeCode">
                </td>
                <td>< a (click)="addRow()">+</a></td>
 </tr>

我想要重复代码验证

比如用户输入的例子

chargecode[0]-A1, -> true
 chargecode[1]-A2, -> true
 chargecode[2]-A1-> -> false->

它应该在用户输入时显示错误重复收费代码

请帮助我如何为响应式表单中的表单数组编写自定义验证

【问题讨论】：

见stackoverflow.com/questions/52026735/… 如何“到达”表单的formArray

标签： angular angular5 angular4-forms

【解决方案1】：

检查该工作解决方案为：

在此示例中验证重复的人名。

DEMO

TS：

findDuplicate(name, p): boolean {
   let myArray = this.getPeople(this.myForm);

   let test = myArray.filter(data => data.controls.name.value == name && name != null)

   if (test.length > 1) {
      return true;
   } else {
     return false
 }}

HTML：

<form class="form-group" [formGroup]="myForm" (ngSubmit)="submit()">
    <table class="table" formArrayName="people">
        <thead class="thead bg-info">
            <tr>
                <th scope="col">People Name
                    <button (click)="addPeople()" type="button">+</button>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let person of getPeople(myForm); let i=index" [formGroupName]="i">
                <td><input class="form-control" type="text" placeholder="Name" formControlName="name">
                    <p style="color:red;" *ngIf="!findDuplicate(person, i) && i > 0">Duplicate Name </p>
                </td>
            </tr>
        </tbody>
    </table>
</form>

【讨论】：

【解决方案2】：

您可以受到这个想法的启发来解决类似的问题。文章： Custom Group Validation in Angular 2

有现场例子live example

谢谢

【讨论】：

【解决方案3】：

假设您要比较此表单中的两个输入值。在这种情况下，我有密码和确认密码表单控件：

  createForm(): void {
    this.registerForm = this.fb.group({
      password: ['', [Validators.required]],
      passwordConfirm: ['', [Validators.required, this.passwordConfirmValidator]]
    });
  }

而passwordConfirmValidator是这样一个函数：

  passwordConfirmValidator(input: FormControl) {
    const value = input.value;
    if (value === input.root.value.password) {
      return null;
    } else {
      return 'Not Equal';
    }
  }

如您所见，您可以通过根属性访问其他表单控件。

【讨论】：

这不是他问兄弟的！