Góc 2/Cách ngăn chặn trình duyệt IE kích hoạt tính năng xác thực đầu vào tự động?

Question

Tôi có các mẫu đơn trong ứng dụng Angular 2 sử dụng ngControl. Ví dụ:

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

Thật không may trên IE 11, khi có trình giữ chỗ, thông báo "Đăng nhập là bắt buộc" được phê duyệt ngay khi trường được lấy nét.

Tôi đã tìm thấy giải pháp cho vấn đề này cho AngularJS. Xem AngularJS/How to prevent IE triggering automatically inputs validation?

Cách woudl thích ứng với giải pháp này cho Góc 2?

Answer 1

Bạn có thể sửa đổi phương pháp this để giải quyết vấn đề này.

giải pháp có thể xảy ra: 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> 

Chỉ thị:

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