将 formControlName 指令附加到以编程方式创建的组件答案

【问题标题】：Attaching formControlName directive to a component created programatically将 formControlName 指令附加到以编程方式创建的组件
【发布时间】：2019-02-13 03:56:54
【问题描述】：

我有一个在 Angular 7 中构建的库自定义表单组件。每个组件都是原生 input、textarea、checkbox 元素的包装器。我已经实现了 ValueAccessor 以使它们与 ngModel 和 formControl/formControlName 一起工作。在声明性使用的情况下一切正常。

例如

<custom-textbox label="Name" required formControlName="name"></custom-textbox>

在我的用例中，我必须从 JSON 动态创建自定义表单组件，并且我已使用 ComponentFactoryResolver 来完成此操作。我的问题是当我动态创建这些自定义表单组件时，我如何将formControlName 指令应用于它。任何帮助将不胜感激。

【问题讨论】：

像任何其他 Angular 输入一样，[formControlName]="myOjbect.nameLabel"
我们需要把它应用到宿主元素上，这样上面的想法就行不通了。
不明白为什么，你也没有具体说明。如果您想要一个全面且经过调整的答案，请提供minimal reproducible example。

标签： angular

【解决方案1】：

假设您的 JSON 看起来像...

myJson = [
  {
    ctrl: 'field1'
  },
  {
    ctrl: 'field2'
  }
];

我们通过迭代数组中的字段来构建我们的表单：

this.myForm = this.fb.group({})

this.myJson.forEach(x => {
  this.myForm.addControl(x.ctrl, this.fb.control(''));
});

那么我们就可以使用angular提供的keyvalue管道来迭代表单控件，并通过ctrl.key传递表单控件

<form [formGroup]="myForm">
  <div *ngFor="let ctrl of myForm.controls | keyvalue">
    <my-field [formControlName]="ctrl.key"></my-field>
  </div>
</form>

另一种选择是跳过组件，完全使用动态表单：https://angular.io/guide/dynamic-form

这应该可以帮助您入门，希望对您有所帮助！ :)

【讨论】：

感谢您的回复。我的问题甚至是 my-field 组件本身就像您共享的链接一样动态创建。所以，我不知道我们如何申请formControlName。
好吧，这就是不提供minimal reproducible example 时可能发生的情况你不会得到适用于你的用例的答案 ;) 请创建一个堆栈闪电战来展示这个问题，我会很高兴看看。