时间戳

首页 > 解决方案 > 使用 Reactive Forms 将 formControlName 转发到 Angular 中的内部组件

angular - 使用 Reactive Forms 将 formControlName 转发到 Angular 中的内部组件

问题描述

<some-input>我有一个包装到的自定义控件组件<ext-some-input>。SomeInput被封装，拥有自己的 API 并支持响应式表单。 ExtSomeInput创建为SomeInput的高级包装器。

我有以下html：

<form [formGroup]="form">
    <ext-some-input formControlName="name">
</form>

和ExtSomeInput的 html：

<some-input formControlName="_???_"></some-input>

问题是如何将formControlName转发到内部SomeInput组件？我需要将表单和内部 formControl 绑定起来。这可能吗？

编辑：

我已经用这个问题创建了 stackblitz 项目：这里

标签： angularangular-reactive-forms

解决方案

您的内部组件可以使用@Input controlName，但不能开箱即用：

错误：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;
}

分叉的 Stackblitz

如果您不知道作为ControlContainer( FormGroupDirective,FormGroupName或FormArrayName) 提供的确切指令，您可以使用更通用的方法：

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

演示

推荐阅读