Açısal 2/IE'nin otomatik olarak giriş doğrulamasını tetiklemesi nasıl önlenir?

Question

Angular 2 uygulamasında ngControl'u kullanan formlarım var. Örnek:

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

Maalesef bir yer tutucu olduğunda, mesaj "Oturum gerekiyor" IE 11, üzerinde en kısa sürede alan odak alır gibi diplayed olduğunu.

AngularJS için bu soruna bir çözüm buldum. Bkz. AngularJS/How to prevent IE triggering automatically inputs validation?

Bu çözümü Angular 2'ye ne kadar uydurur?

Answer 1

Bu sorunu çözmek için this yaklaşımını değiştirebilirsiniz.

olası çözüm:

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

Yönerge kodu:

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