2017-06-23 7 views
4

角度フォームコンポーネントクラスは次のとおりです。別のフォームコントロールに依存する反応的なフォームコントロールを検証する方法は?

export class SpecsFilterFormComponent implements OnInit { 

    specFilterForm: FormGroup; 
    cameraSizeMin = new FormControl("", [Validators.pattern("\s*|[0-9.]*")]); 
    cameraSizeMax = new FormControl("", [Validators.pattern("\s*|[0-9.]*")]); 

    constructor(private fb: FormBuilder) { } 

    ngOnInit() { 

    this.specFilterForm = this.fb.group({ 
    cameraSize: this.fb.group(
    { 
     cameraSizeMin: this.cameraSizeMin, 
     cameraSizeMax: this.cameraSizeMax, 
    }) 
}); 

this.specFilterForm.valueChanges.debounceTime(500).filter(
    formData => this.specFilterForm.valid) 
    .subscribe(
    formData => { 
     console.log("do something after validation") 
    }); 
    } 
    } 

は私がcameraSizeMax> = cameraSizeMinは、どのように制御cameraSizeMinとcameraSizeMaxからで、この検証を適用することを確認する検証を追加します。

セット無効にするcameraSizeMin後:

+0

は、現在の検証およびその他の検証基準(カスタムバリデータ)を含むようにValidator.composeを使用することができます。 – praveen

答えて

2

私は完全なformgroupに適用されると、フォームコントロールでエラーを追加されたカスタムバリデータを作成しました。

class CustomValidator { 
    static validate(abstractForm: FormGroup): {[key: string]: any} => { 
    let cameraSizeMin = abstractForm.get("cameraSizeMin"); 
    let cameraSizeMax = abstractForm.get("cameraSizeMax"); 

    //validation logic in condition below 
    if (true) { 
     cameraSizeMin.setErrors({"customValidation": true}); 
    } 
    } 
} 

によってformGroupにそれをあなたの登録:

this.specFilterForm = this.fb.group({ 
    cameraSize: this.fb.group(
    { 
     cameraSizeMin: this.cameraSizeMin, 
     cameraSizeMax: this.cameraSizeMax, 
    }, {validator: CustomValidator.validate} 
) 
}); 
関連する問題