Angular响应式表单嵌套formGroup下FormControl绑定失效问题

核心问题原因 #

• formGroupName语法与挂载位置错误
  你使用的[formGroupName]="alternate"属于变量绑定，会尝试读取组件实例上的alternate属性作为分组名，而你实际的嵌套分组键名是字符串'alternate'，正确语法应为不带方括号的formGroupName="alternate"，或方括号包裹字符串字面量的[formGroupName]="'alternate'"。同时formGroupName需要挂载在控件的父容器节点上，不能直接作用于表单控件本身，否则分组规则不生效，控件会默认绑定根FormGroup下的同名控件，找不到时就返回null。
• 表单控件取值逻辑隐患
  代码中form.xxx.value的写法依赖你提前在组件中定义了form作为FormGroup的快捷访问器，如果没有定义该变量，会导致取值异常，间接影响分组内控件的渲染绑定。

修复后的代码示例 #

组件类补充（可选，适配你现有form.xxx的写法） #

// 新增FormGroup快捷访问器，对应你模板里的form.xxx写法
get form() {
  return this.formGroup.controls;
}

// 嵌套分组快捷访问器（可选，后续操作alternate分组可直接调用）
get alternateForm() {
  return this.formGroup.get('alternate') as FormGroup;
}

模板修正 #

<div class="flex-2">
  <!-- 将formGroupName挂载到当前分组的父容器上，使用正确的字符串绑定语法 -->
  <ng-container formGroupName="alternate">
    <fieldset class="boxed" *ngIf="form.yesNoMultilingualPrincipalAddress.value">
      <legend translate for="hasDifferentPrincipalAddress">details.main-address</legend>
      <app-yes-no 
        [ngClass]="{ submitted: submitted }" 
        name="hasDifferentPrincipalAddress"
        formControlName="hasDifferentPrincipalAddress"
      ></app-yes-no>
    </fieldset>

    <div class="field dependant" *ngIf="form.yesNoMultilingualPrincipalAddress.value">
      <div class="field">
        <app-address 
          formControlName="differentPrincipalAddress" 
          [submitted]="submitted"
          [showAlternateLanguageFields]="form.yesNoMultilingualPrincipalAddress.value"
        ></app-address>
      </div>
    </div>
  </ng-container>
</div>

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