Angular 2 / How to prevent IE from triggering automatically 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 on IE 11, when there is a placeholder, the message "Login is required" is diplayed as soon as the field gets focus.

I found a solution to this issue for AngularJS. See AngularJS / How to prevent IE triggering automatically inputs validation?

How woudl one adapt this solution to Angular 2?

score 0 · Answer 1 · edited May 23 '17 at 11:33

You can modify 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();
    }
}

arun mohan · Answer 2 · 2019-12-01T02:29:56.817

0

Just replace the placeholder as below: [placeholder]=" 'Full Name' "

edited Dec 01 '19 at 02:29

answered Nov 26 '19 at 14:34

arun mohan

11
3

score 0 · Answer 3 · answered Mar 06 '20 at 08:21

0

using [placeholder] instead of placeholder is working. but if you're using i18n tools you run into the next issue, the placeholder text is no longer parsed from the extraction tool and the translations for the placeholder is no longer working :D

answered Mar 06 '20 at 08:21

dyingangel666

83
8

Angular 2 / How to prevent IE from triggering automatically input validation?

3 Answers3