Angular中设置嵌套Nullable FormGroup为null报错，求解决方案

算力阿峰

2026-8-3

解决Angular嵌套FormGroup设置为null的报错问题

问题场景

你创建了包含嵌套FormGroup的表单，类型定义允许嵌套组为null，但调用setValue设置group: null时触发错误：

this.myForm = formBuilder.group<MyForm>({
  foo: formBuilder.nonNullable.control<string>(''),
  group: new FormGroup<MyGroupForm | null>({
    bar: formBuilder.nonNullable.control('')
  })
});

// 执行后触发报错
this.myForm.setValue({
  foo: 'foo',
  group: null
});

错误信息：

TypeError: Cannot read properties of null (reading 'bar')
  at forms.mjs:1594:18
  at forms.mjs:2818:24
  at Array.forEach (<anonymous>)
  at FormGroup._forEachChild (forms.mjs:2813:36)
  at assertAllValuesPresent (forms.mjs:1593:13)
  at FormGroup.setValue (forms.mjs:2670:9)
  at forms.mjs:2673:33
  at Array.forEach (<anonymous>)
  at FormGroup.setValue (forms.mjs:2671:28)
  at new AppComponent (app.component.ts:27:17)

原因分析

setValue方法会严格校验表单结构，要求传入的值必须完全匹配所有子控件的层级结构。当你传入group: null时，Angular仍会尝试遍历嵌套FormGroup的子控件（如bar），但null不具备这些属性，因此触发类型错误。

解决方案

方案1：使用`patchValue`替代`setValue`

patchValue支持部分表单更新，不会强制校验所有子控件的存在性，可直接设置嵌套组为null：

this.myForm.patchValue({
  foo: 'foo',
  group: null
});

方案2：动态移除/添加嵌套FormGroup

若需要严格遵循表单结构校验，可先移除嵌套的group控件，设置值后再按需恢复：

// 移除嵌套组控件
this.myForm.removeControl('group');
// 设置表单值（此时group字段可合法设为null）
this.myForm.setValue({
  foo: 'foo',
  group: null
});
// 后续需要恢复嵌套组时重新添加
this.myForm.addControl('group', new FormGroup<MyGroupForm>({
  bar: formBuilder.nonNullable.control('')
}));