时间戳

首页 > 解决方案 > 确定是否在组件内提交了表单

javascript - 确定是否在组件内提交了表单

问题描述

我有一个模板驱动的表单，里面有一个自定义组件，应该处理正常的文本输入，并显示错误消息。

<form name="loginForm" #loginForm="ngForm">

我知道，我的表单名为“loginForm”。在里面我使用我的组件：

<app-input-field2
    #loginPagePassField="ngModel"
    name="password"
    [(ngModel)]="user.password"
    required="true"
    type="password"
    placeholderKey="loginPage.input.password">
</app-input-field2>

（如果重要，实现 ControlValueAccessor ......）它具有“必需”属性，并且在内部，当用户未填写此字段时，我会显示一条错误消息。但是我应该什么时候展示它？首先，当用户触摸但没有填充它时，因此在组件内部，有：

<input
    #inputElement="ngModel"
    [(ngModel)]="inputValue"
    ....
<div *ngIf="inputElement.errors && inputElement.touched">
    ((display error))
</div>

一切正常！但是......即使在用户尝试提交表单后，我也应该显示此错误，但该字段未触及。我应该怎么做才能获得最好的自动版本？...我可以将表单的 isSubmitted 标志传递给组件，但这应该在每次出现时都完成。...也许我可以假设表单的模板名称总是类似于“myForm”，所以我可以对其进行查询，但这很荒谬。我可以在不知道模板名称的情况下以某种方式到达父表单的状态吗？

（我应该使用 Angular5）

一个简单的例子：链接——在这里，我传递了表单，所以我可以简单地说“form.submitted”。这似乎与我拥有的每个组件无关。我想以某种方式避免这种情况。

标签： javascriptangular

解决方案

角形式具有属性：

submitted: boolean

返回是否已触发表单提交。

https://angular.io/api/forms/NgForm#properties

推荐阅读