проверка и отображение сообщений об ошибках для конкретного контроллера формы в массиве углов

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) простая форма, созданная с угловой formBuilder

Мне просто нужно, как проверить каждый элемент динамического formArray и отобразить уникальное сообщение для каждого из них, если это конкретное поле недопустимо. Я попробовал несколько решений, а также попытался custom validator function с возвратом ValidatorFn. с этим я мог бы просто проверить formArray, но это не достаточно хорошо для моего сценария, и все же я не могу отображать сообщения в соответствии с поведением функций проверки. Как бы то ни было, я просто должен знать, есть ли лучший способ проверить каждый динамический элемент этого formArray. это правила валидации.

1. каждое поле должно быть уникальным.
2. нужно проверить в реальном времени
3. после добавления нескольких элементов, кто-то редактирует ранее добавленное поле, оно также должно быть проверено в реальном времени с другими значениями полей (это то место, где меня поразили, я мог проверять вверх из поля редактирования, но не поля ниже поле редактирования проверяется соответственно)

Если кто-то сможет показать мне какой-то способ достичь этого правильно, это было бы действительно здорово, так как я поражен этим уже почти 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.

Вот * разветвленный стек