Angular中formGroupName上下文下自定义子组件formControlName报错求助

你的自定义组件<my-input>内部的<input>处于子组件的独立上下文里，没法直接继承父组件中formGroupName="test"的表单上下文。原生<input>能正常工作是因为它们在父组件的模板中，直接处于formGroupName="test"的作用域内，而子组件的模板属于自己的组件实例，Angular的表单指令无法跨组件自动传递上下文，所以才会报找不到父formGroup的错误。

有两种常用的处理方式，按需选择：

方式一：继承父级表单上下文（保持和原生输入框一致的用法） #

通过注入ControlContainer来获取父组件中最近的表单容器（也就是formGroupName="test"对应的FormGroup），然后在子组件模板中绑定这个FormGroup，让内部的formControlName能找到上下文。

修改后的子组件代码：

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

@Component({
  selector: 'my-input',
  template: `
    <div [formGroup]="parentForm">
      <input type="text" [formControlName]="id">
    </div>
  `,
})
export class MyInputComponent { 
  @Input() id: string;
  parentForm: any;

  constructor(private controlContainer: ControlContainer) {
    // 获取父级的FormGroup实例
    this.parentForm = this.controlContainer.control;
  }
}

父组件的调用代码不需要修改，依然用<my-input id="testControl3"></my-input>即可。

方式二：直接传入FormControl实例（更灵活的解耦方式） #

直接把对应的FormControl实例传给子组件，子组件内部直接绑定这个控件，完全不需要依赖父表单上下文。

父组件修改调用代码： #

<my-input [control]="form.get('test.testControl3')"></my-input>

修改后的子组件代码： #

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

@Component({
  selector: 'my-input',
  template: `
    <input type="text" [formControl]="control">
  `,
})
export class MyInputComponent { 
  @Input() control: FormControl;
}

自定义组件会形成独立的模板上下文，Angular的表单指令（如formControlName）无法自动穿透组件边界获取父级的表单上下文。原生输入框因为在父组件模板内，自然能继承上下文，但子组件内部的模板需要手动关联父级表单容器，或者直接传入控件实例来解决。

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