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;

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

如果categories有值且mealTypes为空且mealSelected === true，我只需要将mealType设置为无效。是否可以将一个布尔参数添加到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

如果类别具有值并且mealTypes为null并且mealSelected === true，我只需要将mealTypes设置为无效。

以下是自定义验证器

的方式

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

示例Plunker

自定义验证器 - 传入参数

1 个答案: