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

Question

我的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-dirty]'在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;
}

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