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之前拥有自己的 HTML 元素字段。ng-content即你必须FormControl在模板渲染后更新 s 。

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