使用ng-content时，表单验证中不考虑输入

Question

给定以下组件（带有选择器my-template）：

<form #theForm="ngForm">
    <ng-content></ng-content>
</form>

并像这样使用它：

<my-template>
    <input type="text" required name="firstName" [(ngModel)]="firstName"/>
</my-template>

该表格始终有效-即使输入无效。当输入无效时，如何使表格无效？

现场演示：https : //plnkr.co/edit/lWUe6oeBk6ccsE2JxNKb?p=preview

Answer 1

仅出于测试目的，尝试将表单模板更改为：

<form #theForm="ngForm">
    <input type="text" required name="lastName" [(ngModel)]="lastName"/>
    <ng-content></ng-content>
</form>

你会看到，当lastName无效时该表格就失效了。这意味着在渲染FormComponent之前处理自己的 HTML 元素字段。ng-content即，您必须FormControl在模板呈现后更新 s 。

请阅读此主题动态表单以获取更多信息