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

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

那个代码在做什么？由于 firstNameBlur() 是在事件上执行的...返回 false 是设置 preventDefault。（见此 link：https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault）这是故意的吗？

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

Answer 2

要使其按预期工作，您应该使用 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>

WORKING DEMO

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

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

Angular 2 custom form validation working only after user clear the textbox value

html

angular2-forms

angular