如何在Angular中用*ngIf访问嵌套FormGroup中的控件？

你的问题核心是：Angular的formGroupName仅负责绑定表单控件上下文，不会自动将嵌套的FormGroup/FormControl暴露为模板变量，所以直接用group1.get('enabled')或enabled.value会找不到对应变量。下面提供两种可行的解决方式：

方式一：组件类定义Getter暴露嵌套控件 #

在组件的TypeScript代码中添加Getter，把需要访问的嵌套组和控件直接暴露出来，模板里即可直接调用：

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormControl } from '@angular/forms';

@Component({
  // 组件元数据省略
})
export class YourComponent {
  config: FormGroup;

  constructor(private fb: FormBuilder) {
    this.config = this.fb.group({
      group0: this.fb.group({
        group1: this.fb.group({
          enabled: [false]
        })
      }),
    });
  }

  // 添加Getter暴露嵌套控件
  get group0(): FormGroup {
    return this.config.get('group0') as FormGroup;
  }

  get group1(): FormGroup {
    return this.group0.get('group1') as FormGroup;
  }

  get enabled(): FormControl {
    return this.group1.get('enabled') as FormControl;
  }
}

模板中即可按预期写法使用：

<form class="form" [formGroup]="config">
  <p *ngIf="config.get('group0.group1.enabled').value">Working!!</p>
  <div formGroupName="group0">
    <p *ngIf="group1.get('enabled').value">Working!!</p>
    <div formGroupName="group1">
      <p *ngIf="enabled.value">Working!!</p>
    </div>
  </div>
</form>

方式二：模板引用变量绑定FormGroup/FormControl #

利用Angular模板引用变量，直接在formGroupName或formControlName对应的元素上绑定实例，当前上下文内即可直接访问：

<form class="form" [formGroup]="config">
  <p *ngIf="config.get('group0.group1.enabled').value">Working!!</p>
  <div formGroupName="group0" #group0="formGroup">
    <!-- 通过当前group0实例访问子控件 -->
    <p *ngIf="group0.get('group1.enabled').value">Working!!</p>
    <div formGroupName="group1" #group1="formGroup">
      <!-- 通过当前group1实例访问enabled控件 -->
      <p *ngIf="group1.get('enabled').value">Working!!</p>
      <!-- 若有对应输入框，可直接绑定控件实例 -->
      <input formControlName="enabled" #enabled="formControl">
      <p *ngIf="enabled.value">Also Working!!</p>
    </div>
  </div>
</form>

这里的#group0="formGroup"是将当前上下文的FormGroup实例赋值给模板变量group0，同理#group1="formGroup"和#enabled="formControl"也是相同逻辑，无需再写完整路径。

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