子组件中的 formControlName答案

【问题标题】：formControlName in a children component子组件中的 formControlName
【发布时间】：2018-02-26 22:56:38
【问题描述】：

我想创建一个自定义输入组件并在我的表单中重用它，但我遇到了 formGroup 和 formControlName 的问题。

// Form
<form [formGroup]='loginForm'>
  <custom-input [myFormControlName]='email'></custom-input>
</form>

// CustomInput Component's Template
<input formControlName='myFormControlName'>

问题似乎是 formControlName 期望与 FormGroup 指令一起使用，并且由于我在子组件中使用 formControlName 它没有找到 formControlName.. 任何人都知道如何解决这个问题？

【问题讨论】：

标签： angular angular-reactive-forms

【解决方案1】：

您需要在您的子组件中实现control value accessor，在此处阅读更多内容https://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html

【讨论】：

感谢您的帮助。我有一个后续问题。由于我想使用一个非常基本的输入，我需要定义 ControlValueAccessor 的接口还是只使用 DefaultValueAccessor，如果是的话如何？
我从来没有这样尝试过/我通常实现控制值访问器。
但是你可以做的是扩展 DefaultValueAccessor。 componentName 扩展 DefaultValueAccessor，您将拥有默认 valueAccessor 的所有方法
这是一个旧答案，但我想提一下，作为参考添加的链接 (blog.thoughtram.io/angular/2016/07/27/…) 是一个不同的表单概念。该示例适用于模板驱动的表单，而不是使用formContrlName 的反应式表单。但问题是关于formControlName。

【解决方案2】：

就像@MassimoVariolo 的article 提到的那样，您可以将表单作为输入传递给子组件。

父组件html：

<child-component [form]="form"></child-component>

子组件ts文件：

@Input() public form: FormGroup;

子组件html（需要带有formGroup的div，否则会报错）：

<div [formGroup]="form">
    <input formControlName="myFormControlName"> 
</div>

【讨论】：

【解决方案3】：

我知道如何实现此行为的两种方法，一种是 Sofia 在上面的答案中提到的，第二种方法是将 formControl 传递给子组件！

在父组件 HTML 中

<child-component
   [control]="parentForm.get('form-control-name-you-want-to-pass-down')">
</child-component>

内部child-component

@Input() control: AbstractControl = new FormControl();

子组件 HTML 内部

<input [formControl]="control" />

【讨论】：

太棒了。这是我一直在寻找的解决方案。将 formControl 向下传递给子组件。有效。谢谢。

【解决方案4】：

您可以考虑阅读这篇有用的文章：Using Child Components in Angular Forms

解决方案的核心是将formGroup实例传递给子组件，并用formGroup本身包裹起来。

【讨论】：