Angular中如何让子组件访问父组件的表单控件？

错误原因 #

Angular的formControlName指令仅会在当前组件的模板层级中查找父级表单容器（如formGroup），但组件B作为独立组件，其模板不在组件A的模板树范围内，因此无法自动识别组件A中的editForm表单组，触发NG01050错误。

解决方案一：显式传递FormGroup #

通过@Input将组件A的表单组传递给组件B，在组件B内部绑定该表单组，让formControlName找到父容器。

组件A代码 #

TypeScript

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

@Component({
  selector: 'A',
  templateUrl: './component-a.html'
})
export class ComponentA {
  editForm: FormGroup;

  constructor(private fb: FormBuilder) {
    // 初始化表单，包含name控件
    this.editForm = this.fb.group({
      name: ['']
      // 其他表单控件
    });
  }
}

HTML

<form [formGroup]="editForm">
  <!-- 传递formGroup和控件名给组件B -->
  <B [formGroup]="editForm" [formControlName]="'name'"></B>
  <!-- 其他表单控件 -->
</form>

组件B代码 #

TypeScript

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

@Component({
  selector: 'B',
  templateUrl: './component-b.html'
})
export class ComponentB {
  @Input() formGroup!: FormGroup;
  @Input() formControlName!: string;
}

HTML

<!-- 绑定传入的formGroup作为父容器 -->
<div [formGroup]="formGroup">
  <select class="form-select" [formControlName]="formControlName">
    <!-- 选项内容 -->
  </select>
</div>

解决方案二：利用ControlContainer继承父表单容器 #

通过注入ControlContainer，让组件B自动继承父组件的表单上下文，无需显式传递FormGroup，更简洁。

组件B代码 #

TypeScript

import { Component, Input } from '@angular/core';
import { ControlContainer, FormGroupDirective } from '@angular/forms';

@Component({
  selector: 'B',
  templateUrl: './component-b.html',
  // 关键配置：将父组件的FormGroupDirective作为当前组件的ControlContainer
  viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }]
})
export class ComponentB {
  @Input() formControlName!: string;
}

HTML

<!-- 直接使用formControlName，自动关联父组件的表单组 -->
<select class="form-select" [formControlName]="formControlName">
  <!-- 选项内容 -->
</select>

组件A代码 #

无需修改，保持原有结构即可：

<form [formGroup]="editForm">
  <B [formControlName]="'name'"></B>
  <!-- 其他表单控件 -->
</form>

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