依赖于另一个表单控件的 Angular 2 自定义验证器 [英] Angular 2 Custom validator that depends on another form control

问题描述

我正在尝试为我的 FormControl mealType

I'm trying to make a custom validator for my FormControl mealType

如果我的 FormControl category 有值而 mealType 没有，mealType 应该是无效的.

If my FormControl category has a value and mealType does not, mealType should be invalid.

如果 category 没有值，mealType 应该是有效的.

If category has no value, mealType should be valid.

我收到控制台错误:

类型错误:无法读取未定义的属性get"

TypeError: Cannot read property 'get' of undefined

代码:

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

validateMealType() {
    if (this.findForm.get('categories').value) {
        if (this.findForm.get('mealTypes').value) {
            var mealTypeError = false;
        } else {
            var mealTypeError = true;
        }
    } else {
        var mealTypeError = false;
    }

    return mealTypeError ? null : {
        error: true
    }
}

这是我未定义的形式.

我该如何解决这个问题?

How do I resolve this?

试试这个:

validateMealType(categoryControl: FormControl, mealTypeControl: FormControl) {
    if (categoryControl.value) {
        if (!mealTypeControl.value) {
            var mealTypeError = true;
        } else {
            var mealTypeError = false;
        }
    } else {
        var mealTypeError = false;
    }

    return mealTypeError ? null : {
        error: true
    }
}

但它会导致:

错误app/find-page/subcomponents/find-page/find-form.component.html:36:5导致:无法读取未定义的属性值"

Error in app/find-page/subcomponents/find-page/find-form.component.html:36:5 caused by: Cannot read property 'value' of undefined

试试这个:

class MealTypeValidator {

    constructor(private categoryFormControl: FormControl) { }

    mealTypeValidator(control: FormControl): { [error: string]: any } {
        if (this.categoryFormControl.value) {
            if (!control.value) {
                return { error: true };
            }
        }
    }
}

然后在我的表单组件中:

then in my form component:

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

但是我有编译错误.我该如何做对?我想我对我制作的验证类和它的使用都有点偏离.

but I have compilation errors. How do I get this right? I think i'm just a bit off on both the validation class I made and the usage of it.

推荐答案

你又近了一步.

您需要将自定义验证器附加到 FormGroup，因为它需要知道两个 FormControl(categories 和 mealTypes)，因此附加到 FormGroup 将使验证器更广泛的视图和访问整个 FormControl

You need to attach your custom validator to the FormGroup instead, because it needs to know two FormControl (categories and mealTypes), so attaching to FormGroup will give the validator more broad view and access to the entire FormControl

要实现这一点，请将您的 ngOnInit 更改为

To achieve that, change your ngOnInit to

ngOnInit() {
    this.findForm = new FormGroup({
        mealTypes : new FormControl(null, Validators.Required),
        categories : new FormControl(null)
        // others form control here
    }, validateMealType); // <-- see here is your custom function
}

在上面的代码中，您实际上必须使用 FormGroup 构造函数而不是 FormBuilder，因此您可以在参数中附加您的自定义验证.此外，将您的自定义验证器移到组件类之外.

On above code, you actually have to use FormGroup constructor instead of FormBuilder, so you can attach your custom validation in the parameters. Also, move your custom validator outside the component class.

查看此 Plunker，在此处更深入地了解您的具体情况.

Take a look at this Plunker to get more insight for your specific case here.

这篇关于依赖于另一个表单控件的 Angular 2 自定义验证器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！