Angular10+中如何校验formBuilder.group含两个嵌套分组的响应式表单

问题核心：你当前写法错误的原因是fieldDiff1不是根表单myForm的直接控件，而是嵌套在estimated分组下的子控件，需要先定位到对应嵌套分组再获取内部控件的状态。

方案1：模板直接链式访问 #

直接在模板中通过根表单逐层定位嵌套控件，使用可选链?.避免控件未初始化时报空值错误。
修改你的[ngClass]代码如下：

[ngClass]="{'has-error': myForm.get('estimated.fieldDiff1')?.errors && isSubmited}"

也可以通过controls属性逐层访问：

[ngClass]="{'has-error': myForm.controls.estimated.controls.fieldDiff1?.errors && isSubmited}"

方案2：TS封装Getter简化模板代码 #

在component.ts中提前封装嵌套分组的获取方法，减少模板中的冗余代码：

// 先导入FormGroup类型声明
import { FormGroup } from '@angular/forms';

// 类中添加getter
get estimatedGroup(): FormGroup {
  return this.myForm.get('estimated') as FormGroup;
}

get realizedGroup(): FormGroup {
  return this.myForm.get('realized') as FormGroup;
}

模板中就可以直接使用封装好的分组获取控件：

[ngClass]="{'has-error': estimatedGroup.get('fieldDiff1')?.errors && isSubmited}"

补充优化建议 #

你可以直接使用控件的invalid属性替代判断errors存在，写法更简洁：

[ngClass]="{'has-error': estimatedGroup.get('fieldDiff1')?.invalid && isSubmited}"

如果需要获取realized分组下的控件，同理替换分组名即可，比如realizedGroup.get('fieldDiff1')?.invalid。

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