Angular 2 / 如何防止 IE 触发自动输入验证？

Posted 2023-02-19

【中文标题】Angular 2 / 如何防止 IE 触发自动输入验证？

【英文标题】：Angular 2 / How to prevent IE from triggering automatically input validation?

【发布时间】：2016-10-29 11:18:50

【问题描述】：

我的 Angular 2 应用程序中有使用 ngControl 的表单。示例：

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

不幸的是，在 IE 11 上，当有占位符时，只要字段获得焦点，就会显示“需要登录”消息。

我为 AngularJS 找到了这个问题的解决方案。见AngularJS / How to prevent IE triggering automatically inputs validation?

如何将此解决方案适应 Angular 2？

【参考方案1】：

你可以修改this的方法来解决这个问题。

可能的解决方案：

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

指令代码：

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

【参考方案2】：

只需替换占位符如下： [占位符]="'全名'"

【参考方案3】：

使用 [placeholder] 代替 placeholder 有效。但是如果您使用的是 i18n 工具，您会遇到下一个问题，占位符文本不再从提取工具中解析，并且占位符的翻译不再有效：D