angular - 使用 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 在呈现 ng-content 之前处理自己的 HTML 元素字段。 IE。您必须在呈现模板后更新 FormControl。

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