角度表格验证 - 如何包含来自ng-template的输入？

Question

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

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

inputTemplate看起来像这样:

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

两个输入都具有'required'属性,但是虽然第二个输入为空,但表单仍然有效.

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

演示:Plunker

编辑:在我的实际应用程序中,ng-template来自另一个(第三方)组件,并使用模板引用加载,请参阅此Plunker.

我只找到了一些关于亲子组件问题的解决方案,但在这种情况下这些并不可行.

Answer 1

我认为问题出在 Angular 依赖注入上。您的模板在其他地方定义，并且它使用定义它的位置的注入器。您的表单无法了解它，您的输入也不了解该表单，即使它位于 DOM \xe2\x80\x94 中的上方，但它不在注入器树中。如果您有权访问模板，则可以将表单指令作为上下文传递，并在模板中使用它来链接输入和表单。

\n