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

【问题标题】：inputs are not considered in form validation when using ng-content使用 ng-content 时在表单验证中不考虑输入
【发布时间】：2017-04-28 11:14:20
【问题描述】：

给定以下组件（使用选择器 my-template）：

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

并像这样使用它：

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

表单始终有效 - 即使输入无效。如何使这项工作在输入无效时表单无效？

【问题讨论】：

【解决方案1】：

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

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

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

请阅读本主题Dynamic Form了解更多信息

【讨论】：