Angular表单UI调整：跨FormGroup展示FormControl且保留结构

要实现将document FormGroup下的isAddressPublishable复选框放在location FormGroup内的Locality输入框上方，核心是在模板中直接跨层级引用目标表单控件，不需要调整TS里的表单结构。

错误原因 #

你之前的写法出错，大概率是因为在location的formGroupName作用域内，用formControlName="isAddressPublishable"去查找控件——但这个控件实际属于上层的document FormGroup，当前作用域下找不到对应控件，所以报错。

可行模板写法示例 #

方式1：直接在模板中通过表单路径获取控件

<form [formGroup]="formGroup">
  <!-- 其他表单元素（accountId、id等） -->

  <div formGroupName="document">
    <!-- name、telephone输入框 -->

    <div formGroupName="location">
      <!-- 跨层级引用document下的isAddressPublishable控件 -->
      <div class="form-check">
        <label class="form-check-label">
          <input 
            type="checkbox" 
            class="form-check-input"
            [formControl]="formGroup.get('document.isAddressPublishable')"
          >
          是否公开地址
        </label>
      </div>

      <!-- Locality输入框 -->
      <div class="form-group">
        <label>Locality</label>
        <input 
          type="text" 
          class="form-control"
          formControlName="locality"
        >
      </div>

      <!-- streetAddress、region、postalCode等其他location控件 -->
    </div>

    <!-- categories表单数组等其他document控件 -->
  </div>
</form>

方式2：通过组件getter简化模板代码

在组件类中添加一个getter，提前获取目标控件：

// component.ts中添加
get isAddressPublishableControl() {
  return this.formGroup.get('document.isAddressPublishable') as FormControl;
}

然后在模板中直接使用这个getter：

<div formGroupName="location">
  <div class="form-check">
    <label class="form-check-label">
      <input 
        type="checkbox" 
        class="form-check-input"
        [formControl]="isAddressPublishableControl"
      >
      是否公开地址
    </label>
  </div>

  <!-- Locality输入框及其他控件 -->
</div>

两种方式都能实现需求，且完全不需要修改原有的表单结构定义，核心是绕开当前formGroupName的作用域限制，直接绑定目标控件的实例。

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