angular2（ReactiveForms）で動的カスタム検証を追加するにはどうすればよいですか？

Question

オブジェクトの配列データを入力制御に動的に割り当て、更新を元にロジックを実装する必要があります。配列を更新したいだけでなく、重複したエントリを持つコントロールに入力された名前/データがあるかどうかを確認する検証を開始したい。 私はReactiveFormモジュールを使って検証しました。成功 検証に私が直接APIに更新された構造を渡すことができるように、私は同じアレイ構造を作成する方法

1. - しかし、私は2つの問題の下に直面していますか？
2. 私は配列オブジェクトからformControlNameにidを割り当てる方法は、現在ループインデックスを割り当てています。
   ここplunkar参照 - https://plnkr.co/edit/RSBpT0sFSI1GDCp6K7VR?p=preview

コンポーネント：

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h3> Custom Group Validation</h3> 
     <form [formGroup]="myForm"> 
      <div class="left"> 
       names: <br> 
       <div formArrayName="names"> 
        <div *ngFor="let item of namesArray.controls; let i = index"> 
         <input type="text" [formControlName]="i"> 
         <button (click)="removeAt(i)">X</button><br> 
        </div> 
       </div> 

       <div *ngIf="namesArray.hasError('duplicate')"> 
        duplicate entries 
       </div> 
       <pre>Array value: <br>{{namesArray.value | json}}</pre> 
      </div> 
     </form> 
</div> 
    ` 
}) 

クラス（抽象）：

namesArray:FormArray = new FormArray([], this.customGroupValidation ); 
    dataArray: { custId: number, customerName: string }[] = [ 
{ custId: 101, customerName: 'John' }, 
{ custId: 102, customerName: 'Mike' }, 
{ custId: 103, customerName: 'Julia' }]; 

    ngOnInit():void{ 
     for(let ele of this.dataArray){ 
      this.namesArray.push(
      new FormControl(ele.customerName) 
     ); 
     } 
    } 

どれヘルプおくります！

Answer 1

この両方の問題を処理する1つの方法は、FormGroupの.valueChangesイベントにサブスクライブし、重複条件のFormControl値を検証するためのチェックイン方法を入れます。

また作成しngOnInitにFormGroupにFormControlを添加しながら）（CUSTIDプロパティを割り当てる

コードスニペット -

import { Component, NgModule, OnInit } from '@angular/core' 
import { BrowserModule } from '@angular/platform-browser' 
import { FormBuilder, FormGroup, FormArray, AbstractControl, Validators, FormControl, ReactiveFormsModule } from '@angular/forms' 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h3> Custom Group Validation</h3> 
     <form [formGroup]="customerFormGroup"> 
      <div class="left"> 
       names: <br> 
       <div> 
        <div *ngFor="let item of dataArray"> 
         <input type="text" [formControlName]="item.custId" [(ngModel)]="item.customerName"> 
         <div *ngIf="customerFormGroup.controls[item.custId] && customerFormGroup.controls[item.custId].errors"> 
         duplicate      
         </div> 
        </div> 
       </div> 
       <pre>Array value: <br>{{dataArray | json}}</pre> 
      </div> 
     </form> 
</div> 
    ` 
}) 
export class App implements OnInit { 
    customerFormGroup: FormGroup = new FormGroup({}); 
    dataArray: { custId: number, customerName: string }[] = [ 
    { custId: 101, customerName: 'John' }, 
    { custId: 102, customerName: 'Mike' }, 
    { custId: 103, customerName: 'Julia' }]; 

    ngOnInit(): void { 

    for (let ele of this.dataArray) { 
     let control: FromControl = new FormControl(ele.customerName); 
     this.customerFormGroup.addControl(ele.custId, control); 
    } 

    this.customerFormGroup.valueChanges.subscribe(
     data => this.onValueChanged(data) 
    ); 
    } 

    onValueChanged(data?: any) { 
    if (!this.customerFormGroup) return; 
    let formGroup = this.customerFormGroup; 
    var result = _.groupBy(formGroup.controls, c => { 
     if (c.value) return c.value.toLowerCase(); 
     else c.value; 
    }); 
    for (let prop in result) { 
     if (result[prop].length > 1) { 
     _.forEach(result[prop], function (item: any) { 
      if (item.dirty && item.value) { 
      item.setErrors({ 
       'duplicate': true 
      }); 
      } 
     }) 
     } 
    } 
    } 
} 

@NgModule({ 
    imports: [BrowserModule, ReactiveFormsModule], 
    declarations: [App], 
    bootstrap: [App] 
}) 
export class AppModule { }