自定义验证器 - 传入参数

Question

我有这个自定义验证器来检查我的表单的categories 字段是否有值，如果有，那么如果mealTypes 字段为空，则将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。非常感谢我最后一个问题的回答者。

我现在只有一个验收标准。

我在组件上有这个布尔属性：

private mealSelected: boolean = false;

目前，如果categories 有值且mealtypes 为空，我将mealTypes 设置为无效。

如果categories 有值并且mealTypes 为空且mealSelected === true，我只需将mealTypes 设置为无效。是否可以向 validateMealType 函数添加布尔参数并传入我的组件属性mealSelected??我该怎么做？有人可以更新my plunker 来做到这一点吗？我在这里找到了如何将参数添加到自定义验证器的答案，这很难完全理解并正确应用于我的代码。

Answer 1

您可以创建新的FormControl 来代表您当前的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 关联到任何html input，您可以通过编程方式更新值

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

如果 categories 有一个值并且 mealTypes 为 null 并且 mealSelected === true，我只需将 mealTypes 设置为无效。

这是自定义验证器的样子

if (
    findForm.controls["categories"].value &&
    !findForm.controls["mealTypes"].value &&
    findForm.controls["mealSelected"].value === true
) 
{
    return {"invalidMealTypes": true}; 
}

例如Plunker