Angolare 2/Come impedire a IE di attivare automaticamente la convalida dell'input?

Question

Ho moduli nell'applicazione Angular 2 che utilizza ngControl. Esempio:

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

Purtroppo su IE 11, quando c'è un segnaposto, "è necessaria Login" Il messaggio è diplayed non appena il campo si concentrerà.

Ho trovato una soluzione a questo problema per AngularJS. Vedi AngularJS/How to prevent IE triggering automatically inputs validation?

Come si può adattare questa soluzione ad Angular 2?

Answer 1

È possibile modificare l'approccio this per risolvere questo problema.

Possibile soluzione: codice

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

direttiva:

@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(); 
    } 
}