表单字段报错时FormGroup状态未置为Invalid且错误消息丢失

问题分析 #

你的代码存在两个核心问题：

1. 字段名拼写错误：设置错误时误写为passporRank（少了一个't'），导致错误没有正确绑定到passportRank字段上，因此FormGroup的状态不会更新为Invalid。
2. 错误状态管理不当：通过valueChanges手动设置错误的方式不稳定，切换板块时Angular的变更检测或控件状态重置会清除手动添加的错误提示。

修复步骤 #

1. 修正字段名拼写错误 #

将代码中this.formGroup.get('passporRank')改为this.formGroup.get('passportRank')，确保错误被设置到正确的控件上。

2. 使用自定义验证器管理错误状态 #

替换valueChanges的手动错误设置逻辑，改用Angular表单的自定义验证器，让错误状态与控件绑定，避免被意外清除。

修正后的完整代码：

import { AbstractControl, ValidationErrors, FormBuilder, FormGroup } from '@angular/forms';

// ... 组件类代码
ngOnInit(): void {
  this.initForm();
  this.createFormGroup.setControl('PERSONAL', this.formGroup);
}

initForm() {
  this.formGroup = this.formBuilder.group({
    passportRank: ['', [this.passportRankValidator]],
    country: [],
  });
}

// 自定义验证器：验证护照等级是否符合要求
passportRankValidator(control: AbstractControl): ValidationErrors | null {
  const rank = control.value;
  if (!rank) return null; // 空值不触发验证
  return rank !== '3' ? { notEligible: 'You are not eligible.' } : null;
}

3. 错误提示模板调整（如果需要） #

在模板中绑定验证器返回的错误键notEligible，确保错误提示正确显示：

<input formControlName="passportRank" />
<div *ngIf="formGroup.get('passportRank')?.errors?.notEligible">
  {{ formGroup.get('passportRank')?.errors?.notEligible }}
</div>

为什么这样修复 #

• 自定义验证器是Angular表单的原生机制，错误状态会被表单系统自动管理，不会因切换板块、变更检测或控件值更新被意外清除。
• 当passportRank字段验证失败时，字段状态变为Invalid，FormGroup会自动继承子控件的错误状态，整体变为Invalid。

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