Angular 2/Wie verhindert man, dass der IE automatisch die Validierung der Eingabe auslöst?

Question

Ich habe Formulare in meiner Angular 2-Anwendung, die ngControl verwendet. Beispiel:

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

leider auf 11 IE, wenn ein Platzhalter ist, die Meldung „Anmeldung erforderlich“ wird so schnell diplayed als das Feld den Fokus erhält.

Ich habe eine Lösung für dieses Problem für AngularJS gefunden. Siehe AngularJS/How to prevent IE triggering automatically inputs validation?

Wie soll man diese Lösung an Angular 2 anpassen?

Answer 1

Sie können den Ansatz this ändern, um dieses Problem zu lösen.

Mögliche Lösung:

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

Code Richtlinie:

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