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

问题描述

我有一个自定义控件组件<some-input>，我将其包装到<ext-some-input>。SomeInput封装，有自己的接口，支持反应式表单。ExtSomeInput被创建为SomeInput上的高级包装。

我有以下html：

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

和ExtSomeInput的html：

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

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

编辑：

我已创建了带有此问题的Stackblitz项目：here

推荐答案

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

为了将控件与父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(FormGroupDirective、FormGroupName或FormArrayName))，可以使用更通用的方法：

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

Demo

这篇关于使用反应形式以角度将formControlName转发到内部组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！