Question

我有这个自定义验证器：

export const mealTypesValidator = (mealSelected: boolean) => {
    return (control: FormControl) => {
        var mealTypes = control.value;
        if (mealTypes) {
            if (mealTypes.length < 1 && mealSelected) {
                return {
                    mealTypesValid: { valid: false }
                };
            }
        }
        return null;
    };
};

如果我像这样使用它可以工作：

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

问题是，mealSelected是我的组件上的一个属性 - 当用户选择和取消选择用餐时会更改。

我如何调用上面的验证器使用静态true，它永远不会改变。

当我使用component.mealSelected值作为参数时，如何让验证器工作？例如：

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

因为如果我如上所述，它立即评估this.mealSelected当时是假的 - 然后当用户选择用餐时，它不会继续并将真实传递给自定义验证器。

Answer 1

解决方法是在我的组件中移动验证器并使用this.mealSelected进行检查。然后我在选择/取消选择用餐时没有触发验证器时出现问题，我使用this.findForm.controls['mealTypes'].updateValueAndValidity();来触发验证。

代码（可能会重构以从自定义验证器中删除参数）：

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

mealTypesValidator = (mealSelected: boolean) => {
    return (control: FormControl) => {
        var mealTypes = control.value;
        if (mealTypes) {
            if (mealTypes.length < 1 && this.mealSelected) {
                return {
                    mealTypesValid: { valid: false }
                };
            }
        }
        return null;
    };
};

然而能够拥有一个单独的验证模块来集中验证仍然很好，所以如果有人知道如何将一个变化的参数值，如组件字段作为参数自定义验证器 - 就像我最初问的那样，然后我会欣赏这种技术的答案。

具有可观察参数的Angular 2自定义验证器

1 个答案: