Angular 14读取controls属性报undefined错误排查

报错根因 #

• compare1n2()在fb.group()执行初始化阶段就被调用，此时this.fg还未完成赋值，内部访问this.fg.controls必然拿到undefined触发报错
• 原有逻辑把f1的值存在校验函数外层闭包，即便解决this问题，后续f1值变更时校验函数也只会拿到初始化时的旧值，校验逻辑本身存在缺陷

正确实现方案 #

方案1：校验器绑定到FormGroup层级（官方推荐） #

跨字段校验不建议挂载在单个FormControl上，提升到FormGroup层级可直接获取所有控件实时值，从根源避免this指向问题。
TS代码实现：

import { FormBuilder, FormGroup, Validators, AbstractControl, ValidationErrors } from '@angular/forms';
export class C implements OnInit {
    public fg!: FormGroup;
    public b1: number = 0;
    
    constructor(private fb: FormBuilder) {
        this.fg = this.fb.group({
            f1: ['', [Validators.required]],
            f2: ['', [Validators.required]]
        }, {
            validators: this.compareF1AndF2()
        });
    }
    
    private compareF1AndF2() {
        return (group: AbstractControl): ValidationErrors | null => {
            const v1 = group.get('f1')?.value || '';
            const v2 = group.get('f2')?.value || '';
            return v1 !== v2 ? { valueNotMatch: true } : null;
        }
    }
    
    public b(e: Event) {
        this.b1 = this.fg.get('f1')?.value;
        // f1值变更后手动触发f2校验更新，保证校验状态实时同步
        this.fg.get('f2')?.updateValueAndValidity();
    }
}

模板中错误提示需绑定到FormGroup实例上，而非单个f2控件。

方案2：保留校验在f2控件上 #

如果需要将校验规则挂载在f2控件上，需手动绑定this指向，且每次校验执行时实时获取f1最新值：

constructor(private fb: FormBuilder) {
    this.fg = this.fb.group({
        f1: ['', [Validators.required]],
        // 通过bind绑定组件实例this，避免函数执行时this丢失
        f2: ['', [Validators.required, this.compareF1AndF2.bind(this)]]
    });
}

private compareF1AndF2(control: AbstractControl): ValidationErrors | null {
    if (!this.fg) return null;
    const v1 = this.fg.get('f1')?.value || '';
    const v2 = control.value || '';
    return v1 !== v2 ? { valueNotMatch: true } : null;
}

public b(e: Event) {
    this.b1 = this.fg.get('f1')?.value;
    this.fg.get('f2')?.updateValueAndValidity();
}

注意事项 #

• 不要在校验函数外层闭包缓存其他控件的取值，否则字段值变更后校验逻辑无法获取最新数据
• 被依赖字段值变更时，必须手动触发依赖字段的校验更新，否则校验状态不会自动同步
• 多字段联动校验优先绑定在FormGroup/FormArray层级，可减少this指向相关问题，代码可维护性更高

内容的提问来源于stack exchange，提问作者Jeb50