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

Posted 2023-03-13

【中文标题】使用 ng-content 时在表单验证中不考虑输入

【英文标题】：inputs are not considered in form validation when using 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>

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

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

【参考方案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了解更多信息