如何在动态组件中使用反应形式

Question

背景

我从包含HTML的服务器接收客户端生成的数据，然后我使用该数据创建一个动态组件，该组件将被注入并显示在我们的客户端中。 我收到的HTML可能包含一个或多个我需要通过Angular Reactive Forms绑定的输入。

尝试1：

我尝试通过简单地使用[innerHTML]属性并创建动态Reactive Forms来绑定到输入来解决此要求。但是，由于使用innerHTML属性的技术限制，该方法失败。 在浏览器中呈现HTML后，所有属性都被强制为小写文本，因此任何Angular指令或属性都会失败。例如*ngIf, *ngFor, [formGroup], formControlName等...... Angular使用camelCase几乎所有东西，因此一旦它被强制为小写文本，它就会被忽略，这种方法不再是一个可行的解决方案。

尝试2：

这次我试图利用Angulars NgTemplateOutlet动态地将HTML添加到组件，然后创建并绑定到Reactive Form。 这一开始似乎是一个很好的解决方案，但最终为了让html呈现它需要使用[innerHTML]属性，再一次使这个方法无用（如我第一次尝试中所述）< /强>

尝试3：

最后我发现了动态组件，此解决方案正在部分运行。我现在可以成功地创建一个格式良好的Angular HTML模板，该模板在浏览器中正确呈现。然而，这只解决了我的一半要求。 此时HTML按预期显示，但我无法创建活动表单并绑定到输入。

问题

我现在有一个动态组件生成HTML，其中包含我需要通过创建活动表单来绑定的输入。

尝试4：

这次尝试我将所有用于创建Reactive Form的逻辑放在了创建的Dynamic Component中。

使用此方法会显示动态组件HTML，但我收到一个新错误：

  

“错误错误：formGroup需要一个FormGroup实例。请传递一个   在“

StackBlitz with error scenario

Answer 1

解决方案

Working StackBlitz with solution

解决方案是在父组件中创建Reactive Form。然后使用Angulars依赖注入并将父组件注入动态组件。

通过将父组件注入动态组件，您可以访问所有父组件公共属性，包括反应形式。此解决方案演示了能够创建和使用活动表单进行绑定到动态生成的组件中的输入。

以下完整代码

someObject.selectorr

Answer 2

如果我正确读取此内容，您的模板（HTML）将超出组件初始化，特别是在FormGroup上。防止这种情况发生的最佳方法是在您绑定*ngIf的表单上附加FormGroup声明。这样，在FormGroup被定义之前，它不会呈现。

<form *ngIf="ackStringForm" [formGroup]="ackStringForm" novalidate>