Angular 2/Jak zapobiec automatycznemu wprowadzaniu danych wejściowych przez IE?

Question

Mam formularze w mojej aplikacji Angular 2, która używa ngControl. Przykład:

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

Niestety na IE 11, gdy istnieje zastępczy „jest wymagane Login” wiadomość jest diplayed najszybciej jak pole staje się skupić.

Znalazłem rozwiązanie tego problemu dla AngularJS. Patrz: AngularJS/How to prevent IE triggering automatically inputs validation?

W jaki sposób dostosujesz to rozwiązanie do Angular 2?

Answer 1

Można zmodyfikować podejście this, aby rozwiązać ten problem.

Możliwe rozwiązanie: Kod

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

dyrektywa:

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