Angular 4 表单验证:设置 ng-dirty 在 IE 11 中不起作用

Question

My templete HTML 如下：

<input formControlName="schduleName" 
        type="text"
        id="name"
        [style.width.%]="89.5"
         [class.ng-dirty]="!newSchdule.controls.schduleName.untouched || 
newSchdule.controls.schduleName.valid"/>

TS 代码如下：

this.newSchdule = this.formBuilder.group({
        schduleName: ['', Validators.required],
        scheduleId: [this.defaultId, Validators.required],
        scheduleCreator: [this.defaultCreator, Validators.required],
        scheduleCreateTime: [this.defaultCreateTime, Validators.required]
    });

'

[class.ng-脏]' 在 chrome 中有效，但在 IE 11 中不起作用。如何解决？有人可以帮助我吗？我很困惑。

Answer 1

我的印象是，通过尝试在代码中设置ng-dirty，您正在与试图自己管理它的 Angular 竞争。如果你想为条件!untouched && valid进行一些自定义格式设置，你可以应用你自己的类名(例如 my-dirty (：

<input 
    id="name" 
    type="text" 
    formControlName="username" 
    class="form-control" 
    [class.my-dirty]="isDirty" />

为了提高可读性，我在组件类中定义了isDirty：

get isDirty(): boolean {
  return !this.form.controls.username.untouched && this.form.controls.username.valid;
}

CSS文件可以包含ng-dirty和my-dirty的样式属性：

input.my-dirty {
  background-color: lime;
}
input:not(.my-dirty) {
  background-color: orange;
}
input.ng-dirty {
  border: solid 4px red;
}

使用此堆栈闪电战在IE11和其他浏览器中测试代码。您可以看到ng-dirty由 Angular 管理，而my-dirty是根据我们的条件!untouched && valid应用的。