カスタムバリデーター - パラメータを渡す

Question

フォームのcategoriesフィールドに値があるかどうかを確認するこのカスタムバリデータがあり、そうである場合はmealTypesフィールドがnullの場合はmealTypesを無効に設定します。それはちょうど私のコンポーネントの外に配置されています

function validateMealType(findForm: AbstractControl): { [key: string]: boolean]} { 
    if (findForm.get("mealCategoryChosen").value) { 
     if (!findForm.get("mealTypes").value) { 
      return { "invalidMealTypes": true }; 
     } 
    } 
    return null; 
} 

そして私は私のコンポーネントのフォームを検証するために、私のコンポーネントでそれを使用します。

ngOnInit() { 
    this.findForm = this.formBuilder.group({ 
     categories: null, 
     mealTypes: [null, Validators.required], 
     mealCategoryChosen: null, 
     distanceNumber: null, 
     distanceUnit: 'kilometers', 
     keywords: null, 
    }, validateMealType); 
} 

そして、それは動作します。 Here is the plunker。私の最後の質問の回答者に感謝します。

もう1つの受け入れ基準があります。

私は、コンポーネント上でこのブール型プロパティがあります：categoriesが値を持っており、mealtypesがnullの場合、私は無効とmealTypesを設定現時点で

private mealSelected: boolean = false;

を。

categoriesに値があり、mealTypesがヌルでmealSelected === trueの場合、mealTypesを無効にする必要があります。 validateMealType関数にブール値パラメータを追加し、コンポーネントプロパティに渡すことは可能ですか？mealSelected ??どうすればいい？誰かがそれを更新するためにmy plunkerを更新できますか？ここでは、カスタムバリデーターにパラメータを追加して、コードを完全に理解して正しく適用する方法を示しています。

Answer 1

あなたは、あなたがどのhtml inputに新しいFormControlを関連付ける必要はありませんし、あなたがプログラムで

this.findForm.controls["mealSelected"].setValue(true) //programatically set the value 

を値を更新でき、あなたの現在のmealSelected

this.findForm = new FormGroup({ 
    mealTypes : new FormControl(null, Validators.Required), 
    categories : new FormControl(null), 
    mealSelected : new FormControl(false) // <-- here is the new form control 
}, validateMealType); 

を表現するために、新しいFormControlを作成することができますカテゴリに値があり、mealTypesがnullでmealSelected === trueの場合にのみ、私はmealTypesを無効に設定する必要があります。ここで

カスタムバリデータはPlunker