角2フォーム配列検証

Question

FormArrayのアイテムのバリデータにどのようにアクセスしますか？例えば

：今年は< 1990だった場合

{ 
    firstName: 'Joe', 
    lastName: 'Dirt', 
    cars: [ 
     { make: 'A', model: 'B', year: 1990 }, 
     { make: 'C', model: 'D', year: 1990 } 
    ] 
} 

どのようにmodelに条件を設定するに行きますか？

APIを使用してFormArrayの内部にないプロパティを取得する方法を完全に理解しています。

Answer 1

ここでは、フォーム配列の検証方法の簡単な例を示します。以下は、カスタムバリデータを置くことができバリのキーを使用して第二の目的パラメータを取ることができますフォームの配列内のapp.component.ts

import { Component, OnInit } from '@angular/core'; 
import { FormBuilder, FormGroup, FormControl, FormArray } from '@angular/forms'; 
import { CustomValidator } from './custom-validators'; 
@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: [`./app.component.css`] 
}) 
export class AppComponent implements OnInit { 
    person: FormGroup; 
    carsArray: FormArray; 
    constructor(private fb: FormBuilder) { } 
    ngOnInit() { 
    this.person = this.fb.group({ 
     firstName: this.fb.control('Joe'), 
     lastName: this.fb.control('Dirt'), 
     cars: this.fb.array([ 
     this.fb.group({ 
      make: this.fb.control('a'), 
      model: this.fb.control('b'), 
      year: this.fb.control(1990) 
     }, { 
      validator: CustomValidator.checkYearModel() 
      }) 
     ]) 
    }); 
    this.carsArray = this.person.get('cars') as FormArray; 
    } // End Of Init 
} // End of Class 

フォームグループです。以下は、私は（あなたが下の検証を置くフォームグループである）年に等しい変数と制御のモデル値を作成した。この場合、カスタムvalidator.ts

export class CustomValidator { 
    static checkYearModel() { 
     return (control) => { 
      const year = control.value.year; 
      const model = control.value.model; 
      let valid: boolean; 
      (year < 1990 && model !== 'mustang') ? valid = false : valid = true; 
      return (valid) ? null : { checkYearModel: true }; 
     }; // End of return (control)=> 
    } // End of method 
} // End of Class 

です。年が1990年未満の場合、モデルは有効である必要があります。このメソッドは、有効な変数がtrue（制御が有効であることを意味する）またはtrueの値を持つオブジェクトキー（制御が無効になる）を戻す場合はnullを戻します。これが役立つと思った！