Angular拆分表单组件报错：Cannot find control with name: 'test_type'

这个问题的核心是表单上下文不匹配，我来给你拆解下原因和解决方案：

你现在把整个predictorQuestion顶层表单传给了子组件的parent_form输入属性，但test_type并不是顶层表单的直接控件——它是嵌套在meta_options这个FormGroup里面的。当子组件模板里用[formGroup]="parent_form"时，Angular会在顶层表单里找test_type控件，自然找不到，所以抛出了那个错误。

这里有两种简单的解决办法，你可以根据需求选一种：

方法一：传入正确的嵌套FormGroup给子组件 #

直接把父组件里的meta_options（也就是你已经定义好的那个getter）传给子组件，而不是整个顶层表单：

父组件模板修改：

<meta-option-value [parent_form]="meta_options"></meta-option-value>

子组件的代码完全不用改，因为现在parent_form对应的就是meta_options这个FormGroup，里面直接包含test_type控件，Angular能正确找到它。

方法二：在子组件中指定嵌套的FormGroupName #

如果你一定要把整个顶层表单传给子组件，那就在子组件模板里先指定formGroupName="meta_options"，明确告诉Angular要在哪个嵌套组里找控件：

子组件模板修改：

<div [formGroup]="parent_form">
  <div formGroupName="meta_options">
    <mat-form-field fxFlex="25">
      <mat-select formControlName="test_type">
        <mat-option *ngFor="let vtype of vtypes" value="{{ vtype.value }}">{{ vtype.name }}</mat-option>
      </mat-select>
    </mat-form-field>
  </div>
</div>

这样Angular就会先定位到顶层表单下的meta_options组，再在里面查找test_type控件，问题就解决了。

简单总结下：Angular表单控件的查找是基于当前绑定的formGroup上下文的，一定要确保你的formControlName和当前的formGroup（或formGroupName）是匹配的，不然就会出现找不到控件的错误。

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