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

Question

I'm trying to validate my input box immediately after the input box gets blur. But some how the validation message only appears when i write something in textbox and than delete it.

Here's my HTML template;

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

Here's my typescript;

firstNameBlur(value:string) {

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

}

Please help me out. Thanks in advance!

Answer 1

To make it working as you expected, you should use untouched instead of pristine , like this:

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

or using *ngIf (IMHO, it's really better):

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

WORKING DEMO

Note that you don't need (blur) .

Answer 2

I'm not sure why you are binding to the blur event? The required attribute should cause Angular to automatically validate the required field when the user leaves the field.

And what is that code doing? Since the firstNameBlur() is executed on an event ... returning false is setting preventDefault. (See this link: https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault ) Is that what is intended?

Try removing the blur event and see if it works without it. If so, then you don't need the firstNameBlur method.