角度形式:将错误传递给组之一

时间:2018-11-21 10:24:10

标签: angular typescript angular-reactive-forms

很抱歉,如果它与某些问题重复,我没有找到解决问题的办法。

我在Angular 5应用中有两个来自@angular/forms的表单组。其中之一具有可设置错误的自定义验证器。组之一有错误,并且表单无效,但是表单内部没有任何错误。如何防止它并正确显示错误?

创建表单

private createForm() {
    const groups = {};

    this.groupArray.forEach((item, index) => {
        const group: SomModel<FormControl> = { thing: this.fb.control(thing.id, [Validators.required]) };

        groups['thing' + index] = index === 0 ?
            this.fb.group(group) :
            this.fb.group(group, { validator: this.thingMatchValidator(groups['thing' + (index - 1)].controls.thing) });
    });

    this.form = this.fb.group(groups);
}

Validator

thingMatchValidator(from: Dictionary<FormControl>): ValidatorFn {
    return (to: AbstractControl): { [key: string]: any } => {  // seems that I soudn't use AbstractControl because I have FormGroup here
        const thingFrom = from.thing.value;
        const thingTo = to.value.thing;
        const test = thingFrom && thingTo && thingFrom === thingTo ? { portMatch: true } : null;
        return test;
    };
}

更新:

我需要验证的字段保持有效,但表单无效。

enter image description here

0 个答案:

没有答案