如何在Angular嵌套FormGroup中访问外层FormGroup的formControlName？

核心问题分析 #

在FormArray的嵌套FormGroup上下文里使用formControlName="correctOption"时，Angular会默认在当前嵌套的FormGroup中查找目标控件，但correctOption实际属于根FormGroup，因此绑定失效。

解决方案 #

要直接绑定根表单的控件，需使用[formControl]指令（替代formControlName），直接传入根表单中correctOption控件的实例。

方法1：模板内直接引用根表单控件 #

修改模板中的单选框绑定逻辑，替换formControlName为[formControl]并指向根表单的目标控件：

<ng-container *ngIf="form.get('typeId').value == 3">
  <div formArrayName="options"> <!-- 修正：options是FormArray，需用formArrayName指令 -->
    <div *ngFor="let ctrl of optionsArray.controls; let i = index">
      <div formGroupName="{{i}}" class="layout-row">
        <input formControlName="option" type="text" placeholder="Option">
        <div *ngIf="form.get('validateResponse').value" class="flex-100px flex-align-auto">
          <label class="material-radio">
            <input type="radio" [value]="i+1" [formControl]="form.get('correctOption')">
            <span>Is Correct</span>
          </label>
        </div>
      </div>
    </div>
  </div>
</ng-container>

方法2：组件内定义快捷引用（更简洁） #

在组件类中提前定义属性指向根表单的correctOption控件，减少模板内的重复代码：

public correctOptionCtrl: UntypedFormControl;

// 表单初始化后添加该引用
this.form = this.fb.group({
  typeId: ["", Validators.compose([Validators.required])],
  validateResponse: [false],
  options: this.optionsArray,
  correctOption: [null, Validators.compose([CustomValidators.numeric])],
});
this.correctOptionCtrl = this.form.get('correctOption') as UntypedFormControl;

模板中直接使用该属性：

<input type="radio" [value]="i+1" [formControl]="correctOptionCtrl">

额外修正：FormArray的控件类型 #

你的ctrlOptions定义为UntypedFormControl[]，但模板中使用了formGroupName="{{i}}"，这意味着FormArray的每个元素应为FormGroup（而非单个FormControl），需调整初始化逻辑：

// 添加选项组的方法
addOption() {
  const optionGroup = this.fb.group({
    option: ['', Validators.required]
  });
  this.optionsArray.push(optionGroup);
}

ngOnInit() {
  this.optionsArray = new UntypedFormArray([]);
  this.form = this.fb.group({
    // 其他控件配置
    options: this.optionsArray,
    correctOption: [null, Validators.compose([CustomValidators.numeric])],
  });
  // 默认添加一个选项组
  this.addOption();
}

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