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

2023年4月20日 252次阅读

给定以下组件(使用选择器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

最佳答案 仅出于测试目的,尝试将表单模板更改为：

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

您将看到,当lastName无效时,该表单将变为无效.这意味着FormComponent在呈现ng-content之前处理自己的HTML元素字段.即您必须在呈现模板后更新FormControls.

有关更多信息,请阅读此主题Dynamic Form

点赞