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来自另一个（第三方）组件，并使用模板参考加载，请参阅this Plunker。

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

Answer 1

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

Answer 2

我相信问题在于Angular依赖注入。您的模板在其他地方定义，并且从定义的任何地方使用Injector。您的表单无法知道它，而您的输入也不知道该表单，即使它在DOM之上也是如此-它不在Injector树中。如果您有权访问模板，则可以将form指令作为上下文传递，并在模板中使用它来链接输入和表单。

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

2 个答案: