Question

我的模板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]
    });

＆＃39; [class.ng脏]＆＃39;是在Chrome中工作，但在IE 11中不起作用。如何解决？有人可以帮帮我吗？我很困惑。

Answer 1

我的印象是，通过尝试在代码中设置ng-dirty，您正在与试图manage it by himself的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;
}

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

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

1 个答案: