Angular嵌套组件使用formControlName报错，求可行方案或结构建议

安全阿岳

2026-7-3

Angular嵌套组件中formControlName报错的解决方案

这种结构完全可以配合FormGroups正常工作，不需要将所有内容合并到一个组件中。报错的原因是子组件MyInputComponent无法获取到父组件MyForm中formGroup的上下文，formControlName指令必须在有父级表单指令（如FormGroupDirective）的上下文中才能使用。

下面提供两种可行的解决方法：

方法一：继承父组件的表单上下文

在子组件的元数据中配置viewProviders，注入父组件的FormGroupDirective，让子组件继承父组件的表单上下文：

子组件MyInputComponent的TS代码：

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

@Component({
  selector: 'app-my-input-component',
  templateUrl: './my-input-component.component.html',
  viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }]
})
export class MyInputComponent {}

这样修改后，子组件内的input标签使用formControlName='myInput'就能正常关联到父组件myFormGroup中的对应控件，无需修改模板代码。

方法二：通过输入属性传递表单控件

直接将父组件中的表单控件通过@Input传递给子组件，子组件使用formControl绑定：

父组件模板修改：

<form [formGroup]="myFormGroup">
    <app-my-input-component [control]="myFormGroup.get('myInput')"></app-my-input-component>
</form>

子组件MyInputComponent的TS代码：

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

@Component({
  selector: 'app-my-input-component',
  templateUrl: './my-input-component.component.html'
})
export class MyInputComponent {
  @Input() control!: FormControl;
}