Internet explorer 角度2/如何防止IE自动触发输入验证？

我的Angular 2应用程序中有使用

ngControl

的表单。例如：

登录
需要登录

不幸的是，在IE11上，当有占位符时，只要字段获得焦点，就会显示消息“Login is required”

我为AngularJS找到了这个问题的解决方案。看

如何将此解决方案应用于角度2？

您可以修改此方法来解决此问题

可能的解决办法：

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

---

只需替换占位符，如下所示：

---

[placeholder]=“全名”

使用[placeholder]代替占位符正在工作。但是，如果您使用的是下一期的i18n工具，则占位符文本将不再从提取工具中解析，并且占位符的翻译也不再有效：D

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