自定义验证器 - 传入参数

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。非常感谢我对 plunker 的最后一个问题的回答者。

我现在又多了一个验收标准。

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

private mealSelected: boolean = false;

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

如果 categories 有值且 mealTypes 为空且 mealSelected === 为真，我只需要将 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

I need to only set mealTypes to be invalid if categories has a value and mealTypes is null AND mealSelected === true.

这是自定义验证器的样子

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

示例Plunker

自定义验证器 - 传入参数

Custom Validator - Pass in Parameter

angular

angular2-forms

customvalidator