別のフィールド値に基づいて角度フォームフィールドの異なるバリデータ

Question

私はsearchTypeとnumberの2つのフィールドを持つ反応形式を持っています。フィールドsearchTypeは、 '0'または '1'のみです。 numberは数字であり、数字にはいくつかのバリデーションがあります。

this.searchForm = this.formBuilder.group({ 
    searchType: ['0'], 
    number: [ 
    undefined, 
    [ Validators.required, Validators.minLength(6) ] 
    ] 
}); 

しかし、今、私はsearchTypeがsearchTypeが0であれば、私は[ Validators.required, Validators.minLength(6) ]を使用する必要がありますが、searchTypeが1である場合、私は[ Validators.required, Validators.minLength(8), Validators.minLength(20)]を使用する必要が例えば1である場合にのみ、numberのためにいくつかの特定のバリデータを追加したいです。どうやってやるの？

Answer 1

searchTypeに変更イベントを設定するか、valueChangesにサブスクライブし、numberフォームコントロールのバリデータを設定することができます。

searchtypeCtrl: FormControl; 
numberCtrl: FormControl; 

this.searchForm = this.formBuilder.group({ 
    searchType: ['0'], 
    number: [undefined,[ Validators.required, Validators.minLength(6) ]] 
}); 
// set form controls to variables 
this.searchTypeCtrl = this.searchForm.get('searchType'); 
this.numberCtrl = this.searchForm.get('number'); 

とvalueChanges。前述のように、いくつかの変更イベントを聴いて、searchTypeCtrlの値をチェックし、それに応じてバリデータを更新するメソッドを呼び出すこともできます。

searchTypeCtrl.valueChanges.subscribe(value => { 
    value === 0 ? this.numberCtrl.setValidators([..conditional validators..]) : 
        this.numberCtrl.setValidators([..conditional validators..]) 

    this.numberCtrl.updateValueAndValidity(); 
})