Angular FormBuilder使用hidden输入框报错：无法找到指定控件的解决方法

看起来你遇到的问题核心是表单控件的层级不匹配，Angular找不到你定义的codigoIbgeMunicipioForm控件，我来帮你一步步排查和解决：

错误原因分析 #

从你的代码来看，组件里通过adicionarEnderecoFormGroup()创建的FormGroup已经包含了codigoIbgeMunicipioForm和paisForm这两个字段，但HTML里却把这些控件放在了FormGroupName="enderecoFormGroup"的容器里——这意味着Angular会去父表单中寻找名为enderecoFormGroup的子FormGroup，而不是直接用你创建的这个包含隐藏字段的FormGroup，所以才会抛出找不到控件的错误。

解决方案一：修正表单层级匹配 #

根据你的实际表单结构，有两种修正方式：

情况1：你的表单就是直接用adicionarEnderecoFormGroup()创建的单一层级FormGroup #

如果组件里是这样初始化表单的：

enderecoForm: FormGroup;

ngOnInit(): void {
  this.enderecoForm = this.adicionarEnderecoFormGroup();
}

那HTML里不需要额外的FormGroupName，直接把表单容器绑定到这个FormGroup即可：

<form [formGroup]="enderecoForm">
  <!-- 其他可见表单控件（比如cepForm、numeroEnderecoForm等） -->
  
  <!-- 隐藏输入框直接挂在当前FormGroup下 -->
  <input formControlName="codigoIbgeMunicipioForm" id="codigoIbgeMunicipioForm" type="hidden" />
  <input formControlName="paisForm" id="paisForm" type="hidden" />
</form>

情况2：你的表单是包含多个子FormGroup的父表单 #

如果adicionarEnderecoFormGroup()是作为父表单的一个子组存在的（比如父表单里有enderecoFormGroup这个键），那组件里需要这样初始化父表单：

parentForm: FormGroup;

ngOnInit(): void {
  this.parentForm = this.formBuilder.group({
    // 其他父表单字段
    enderecoFormGroup: this.adicionarEnderecoFormGroup()
  });
}

对应的HTML要先绑定父表单，再通过FormGroupName指定子组：

<form [formGroup]="parentForm">
  <div formGroupName="enderecoFormGroup">
    <!-- 其他可见表单控件 -->
    
    <input formControlName="codigoIbgeMunicipioForm" id="codigoIbgeMunicipioForm" type="hidden" />
    <input formControlName="paisForm" id="paisForm" type="hidden" />
  </div>
</form>

解决方案二：不需要DOM中的隐藏输入框（更推荐） #

其实对于用户看不到的隐藏字段，完全不需要在HTML里渲染<input type="hidden">，直接在组件中通过FormControl的API维护值即可，这样能避免DOM层级的问题，代码也更简洁：

比如，在组件中更新隐藏字段的值：

// 设置codigoIbgeMunicipioForm的值
this.enderecoForm.get('codigoIbgeMunicipioForm').setValue('你的IBGE编码');

// 或者用patchValue批量更新
this.enderecoForm.patchValue({
  codigoIbgeMunicipioForm: '你的IBGE编码',
  paisForm: 'BR'
});

这种方式下，你可以直接删除HTML里的两个隐藏输入框，Angular依然会在表单提交时包含这些字段的值。

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