验证并显示表单数组中特定表单控制器的错误消息 angular

Question

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, Validators, ValidatorFn, AbstractControl } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.buildForm();
  }
  get vehicleGroup(): FormArray {
    return <FormArray>this.myForm.get('vehicleGroup');
  }

  buildForm(): void {
    this.myForm = this.fb.group({
      name: ['', Validators.required],
      vehicleGroup: this.fb.array([
        this.fb.group({
          vehicle: ['', Validators.required]
        })
      ], [Validators.required]),
    });
  }

  addVehicles(): void{
    const itemToAdd = this.fb.group({
      vehicle: ['', Validators.required]
    });
    this.vehicleGroup.push(itemToAdd);
  }
  deleteVehicle(i: number){
    this.vehicleGroup.removeAt(i);
  }

  save(): void{
    console.log('save');
  }
}

<form novalidate (ngSubmit)="save()" [formGroup]="myForm">

  <div class="form-group">
    <label for="name">Name</label>
    <input id="name" type="text" formControlName="name">
  </div>

 <div class="form-group">
  <label for="vehicle">Vehicle</label>
      <div formArrayName="vehicleGroup" *ngFor="let vehicle of vehicleGroup.controls; let i=index">
        <div class="form-group" [formGroupName]="i">
          <div>
            <input id="{{'vehicle'+i}}" type="text" formControlName="vehicle">
            <button type="button" (click)="deleteVehicle(i)"
              *ngIf="vehicleGroup.length >= 2">remove
            </button>                  
          </div>
        </div>
      </div>
      <div class="form-group">
      <button type="button" class="link-button" [disabled]="!vehicleGroup.valid" (click)="addVehicles()">
          + Add more vehicles
      </button>
      </div>
 </div> 
</form>

我有这个 (stackBlitz) 使用 angular formBuilder

创建的简单表格

我只需要了解如何验证动态 formArray 的每个元素，并在特定字段无效时为每个元素显示唯一的消息。我尝试了几种解决方案，还尝试了 custom validator function 和 return 和 ValidatorFn。这样我就可以简单地验证 formArray，但它对我的场景来说还不够好，而且我仍然无法根据验证函数行为显示消息。如何缩小范围，我只需要知道是否有更好的方法来验证此 formArray 的每个动态元素。这些是验证规则。

每个字段值都应该是唯一的。
需要实时验证
添加几个元素后，有人编辑了之前添加的字段，它也应该实时验证每个其他字段值（这是我被击中的地方，我可以从编辑字段向上验证，但不是字段相应地验证编辑字段下方）

如果有人能告诉我一些方法来以正确的方式实现这一点，那就太好了，因为我已经被这个问题困扰了将近 3 天，但仍然找不到更好的解决方案。

Answer 1

我在我的项目中使用了 @rxweb/reactive-form-validators 的唯一验证器。它可以直接在组件中使用，无需创建任何自定义验证函数。

您可以按如下方式编辑 addVehicles 方法：

addVehicles(): void{
    const itemToAdd = this.fb.group({
      vehicle: ['', RxwebValidators.unique()]
    });
    this.vehicleGroup.push(itemToAdd);
  }

并添加

ReactiveFormConfig.set({"validationMessage":{"unique":"Enter unique value in the input"}});

到 ngOnInit。

这是forked stackblitz

验证并显示表单数组中特定表单控制器的错误消息 angular

validating and display error messages for specific form controller in a form array angular

javascript

validation

angular-reactive-forms

angular6