表单组件，用于响应式表单和模板驱动表单

Question

我有一个场景，我正在尝试构建一个组件库，并且我正在尝试为表单组件找到一种解决方案，该解决方案可以同时适用于响应式和模板驱动的表单。

目前我正在使用@Input()将 formControlName 和 formGroup 实例注入子组件中，这适用于反应式表单。但是，我找不到适用于响应式和模板驱动方法的解决方案，因为[(ngModel)]创建了自己的 formControlName，我无法(据我所知(将其注入为 formControlName。

我真的很希望能够做到以下几点。

反应式表单

<input-component
formControlName="email"
[formGroup]="form"
></input-component>

模板驱动的表单

<input-component
[(ngModel)]="email"
name="email"
></input-component>

这可能吗？也许某种方式可以查看父级以推导出这些值而不是将它们传递下来？

提前谢谢你。

TS 文件- 根据要求

import {Component, Input, OnInit, ViewEncapsulation} from '@angular/core';
import {FormControl, FormGroup} from "@angular/forms";
@Component({
selector: 'ui-input',
templateUrl: './input.component.html',
encapsulation: ViewEncapsulation.Emulated,
styleUrls: ['./input.component.scss']
})
export class InputComponent implements OnInit {
@Input() form_control_name: string;
@Input() formGroup: FormGroup;
constructor(
) { }
ngOnInit() {
}
}

Answer 1

您需要在组件上实现ControlValueAccessor。

你可以在这里阅读更多内容