且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

使用反应形式以角度将formControlName转发到内部组件

更新时间:2023-12-02 23:45:04

您的内部组件可以接受@InputcontrolName,但它无法开箱即用:

错误:formControlName必须与父FormGroup指令一起使用。

为了将控件与父FormGroup绑定,您可以按如下方式定义viewProvider

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

@Component({
  ...
  viewProviders: [
    {
      provide: ControlContainer,
      useExisting: FormGroupDirective
    }
  ]
})
export class DateWrapperComponent implements OnInit {
    @Input() controlName: string;
}

Forked Stackblitz

如果您不知道提供哪个指令作为ControlContainer(FormGroupDirectiveFormGroupNameFormArrayName)),可以使用更通用的方法:

viewProviders: [
  {
    provide: ControlContainer,
    useFactory: (container: ControlContainer) => container,
    deps: [[new SkipSelf(), ControlContainer]]
  }
]

Demo