Angular 表单验证 - 如何包含来自 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>

输入模板看起来像这样:

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

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

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

演示:Plunker

编辑:在我的真实应用程序中，ng-template 来自另一个(第 3 方)组件并使用模板引用加载，请参见 this Plunker .

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

Answer 1

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