Angular 表单验证 - 如何包含来自 ng-template 的输入？答案

【问题标题】：Angular Form Validation - How to include input from ng-template?Angular 表单验证 - 如何包含来自 ng-template 的输入？
【发布时间】：2018-04-19 17:51:39
【问题描述】：

在模板驱动的表单中，我有两个输入。第二个来自 ng-template。

<form #testForm="ngForm">
    First name <input type="text" name="firstName" [(ngModel)]="firstName" required> (required)
    <br>
    <ng-container *ngTemplateOutlet="inputTemplate"></ng-container>
</form>

输入模板如下所示：

<ng-template #inputTemplate>
    Last name <input type="text" name="lastName" [(ngModel)]="lastName" required> (required)
</ng-template>

两个输入都具有“必需”属性，但尽管第二个输入为空，但表单仍然有效。

有没有办法确保来自模板的输入被表单识别？

演示：Plunker

编辑：在我的实际应用程序中，ng-template 来自另一个（第 3 方）组件并使用模板引用加载，请参阅 this Plunker。

我只找到了一些关于父子组件问题的解决方案，但这些在这种情况下并不实用。

【问题讨论】：

stackoverflow.com/questions/46849570/…
谢谢，但这两个选项在我的实际应用程序中都不起作用，其中来自另一个（第 3 方）组件。但是，在同一个组件中它工作正常。好像我在我的问题中过度简化了这个例子。添加了附加信息。谢谢。
第二个选项应该适合你
无法正常工作。向包含表单的组件添加了 viewProviders。输入仍然被添加而不被添加到表单中。你有来自另一个组件的 ng-template 的工作示例吗？
ng-template comes from another (3rd party) 能不能说一下什么是第三方库？

标签： angular typescript angular-forms

【解决方案1】：

你不能这样做，因为 ng-template 不支持 @Inputs 和 @Outputs。我建议您创建一个自定义输入组件。实现 ControlValueAccessor 来实现这一点 - 它会让你绑定 ngModel、设置值等。

【讨论】：

【解决方案2】：

把ng-template#inputTemplate放到form里面，就可以了。

<form #testForm="ngForm">
    First name <input type="text" name="firstName" [(ngModel)]="firstName" required> (required)
    <br>
    <ng-container *ngTemplateOutlet="inputTemplate"></ng-container>

    <ng-template #inputTemplate>
    Last name <input type="text" name="lastName" [(ngModel)]="lastName" required> (required)
    </ng-template>
</form>

【讨论】：

【解决方案3】：

我相信问题在于 Angular 依赖注入。您的模板是在其他地方定义的，并且它在定义的地方使用 Injector。你的表单不知道它，你的输入也不知道表单，即使它在 DOM 中位于它之上——它不在 Injector 树中。如果您可以访问模板，您可以将表单指令作为上下文传递并在模板中使用它来链接输入和表单。

【讨论】：

“将表单指令作为上下文传递并在模板中使用它来链接输入和表单” - 知道如何准确吗？用<ng-template #tmpl><form #frm="ngForm">..<ng-container *ngTemplateOutlet="tmpl; context: frm"> 或context: {$implicit: form}..说。
第二个。 Context 应该是一个带有 $implicity 键的对象，这样你以后就可以在模板中使用它：<ng-template #ref let-form> 并将其传递给模板内的 formGroup。
能否为对 Angular 了解较少的人详细说明一下？也许是一个有效的 Stackblitz？