Angular 2 / How to prevent IE from starting with automatic input validation?

Question

I have forms in my Angular 2 application that uses ngControl . Example:

 <label for="login-field-inputLogin" class="sr-only">Login</label> <input [(ngModel)]="login" id="login-field-inputLogin" class="form-control" placeholder="Login" ngControl="loginCtrl" #loginCtrl="ngForm" type="text" required /> <div [hidden]="loginCtrl.valid || loginCtrl.pristine" class="alert alert-danger">Login is required</div> 

Unfortunately, in IE 11, when there is a placeholder, the "Login required" message expands as soon as the field becomes the focus.

I found a solution to this problem for AngularJS. See AngularJS / How to prevent launch IE launches automatic validation check?

How can I adapt this solution to Angular 2?

Answer 1

You can change this approach to solve this problem.

Possible Solution:

 <label for="login-field-inputLogin" class="sr-only">Login</label> <input validate-onblur <--- directive, see below [(ngModel)]="login" id="login-field-inputLogin" class="form-control" placeholder="Login" ngControl="loginCtrl" #loginCtrl="ngModel" type="text" required /> <div [hidden]="loginCtrl.valid || loginCtrl.pristine" class="alert alert- danger">Login is required</div> 

Directive Code:

 @Directive({ selector: '[validate-onblur]', host: { '(focus)': 'onFocus($event)', '(blur)' : 'onBlur($event)' } }) export class ValidateOnBlurDirective { private hasFocus = false; constructor(public formControl: NgControl) { } // mark control pristine on focus onFocus($event) { this.hasFocus = true; this.formControl.control.valueChanges .filter(() => this.hasFocus) .subscribe(() => { this.formControl.control.markAsPristine(); }); } // mark control dirty on focus lost onBlur($event) { this.hasFocus = false; this.formControl.control.markAsDirty(); } }