Question

我在输入框变得模糊后立即尝试验证输入框。但是有些如何在我在文本框中写一些东西而不是删除它时，验证信息才会出现。

这是我的HTML模板;

＆＃13;

<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>

＆＃13;

这是我的打字稿;

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>

WORKING DEMO

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

Answer 2

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

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

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

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

2 个答案: