Angular 2 自定义表单验证仅在用户清除文本框值后工作

Question

我正在尝试在输入框模糊后立即验证我的输入框。但是有些验证消息仅在我在文本框中编写内容而不是删除它时才出现。

这是我的 HTML 模板;

<input type="text"
placeholder="First Name"
class="form-control"
name="firstName"
id="firstName"                                       
[ngModel]="typeValidation.firstName"
#firstName="ngModel"
(blur)="firstNameBlur(firstName.value)"
autofocus
required>

<small [hidden]="firstName.valid || (firstName.pristine && !f2.submitted)" class="text-danger">
First Name is required.
</small>

这是我的打字稿;

firstNameBlur(value:string) {
if (value == "" || value == undefined) {
return false;
}
else {
return true;
}
}

请帮帮我。 提前感谢！

Answer 1

要使其按预期工作，您应该使用untouched而不是pristine，如下所示：

<small [hidden]="firstName.valid || (firstName.untouched && !f2.submitted)"
class="text-danger">
First Name is required.
</small>

或使用*ngIf(恕我直言，它真的更好)：

<small *ngIf="firstName.invalid && (firstName.touched || f2.submitted)"
class="text-danger">
First Name is required.
</small>

工作演示

请注意，您不需要(blur)。

Answer 2

我不确定你为什么要绑定到模糊事件？必需属性应使 Angular 在用户离开字段时自动验证必填字段。

代码在做什么？由于firstNameBlur()是在事件上执行的...返回 false 是设置阻止默认。(请参阅此链接：https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)这是本意吗？

尝试删除模糊事件，看看没有它是否有效。如果是这样，则不需要 firstNameBlur 方法。