更改样式无效 && 触及答案

【问题标题】：change style invalid && touched更改样式无效 && 触及
【发布时间】：2020-05-08 15:23:33
【问题描述】：

当另一个字段为touched 和invalid 时，我正在尝试更改i 标记样式，如下所示，但i 标记并没有真正改变，只有input 标记发生了变化。

input.ng-touched.ng-invalid
{
    border-color: red;
}

input.ng-valid
{
    border-color: green ;
}

.green-icon
{
    color:green;
}
.red-icon
{
    color:red;
}

 <div class="form-group">
    <div class="input-group">
      <div class="input-group-prepend">
        <div class="input-group-text bg-white">
          <i class="fas fa-user circle"  [class.green-icon]="CardOwnerName.valid" [class.red-icon]="CardOwnerName.invalid && CardOwnerName.touched"></i>
        </div>
      </div>
      <input #CardOwnerName formControlName="CardOwnerName" name="CardOwnerName" class="form-control" placeholder="Card Owner Name" required>
    </div>  
  </div>

我假设我的 Angular 版本缺少一些东西。也许有些东西被弃用了？

【问题讨论】：

你使用的是模板驱动表单还是响应式表单
我正在使用响应式表单
将CardOwnerName.valid 更改为myForm.controls.CardOwnerName.valid。或者重命名模板别名。

标签： html css angular angular7

【解决方案1】：

移除模板中元素的引用，改为访问表单对象：

<input formControlName="CardOwnerName" name="CardOwnerName" class="form-control" placeholder="Card Owner Name" required>

get CardOwnerName() {
    return this./* form group name here */.get('CardOwnerName');
}

【讨论】：

这适用于i 标签吗？我熟悉这种方法，但想根据CardOwnerName 验证更改另一个标签的样式。
是的，通过这些更改，模板的其余部分应该可以正常工作。我想。

【解决方案2】：

试试这样：

 <i class="fas fa-user circle" [ngClass]="{'red-icon': form.get('CardOwnerName').invalid, 'green-icon': form.get('CardOwnerName').valid }"  ></i>

或者，

<i class="fas fa-user circle" [ngClass]="(form.get('CardOwnerName').valid)?'green-icon':'red-icon'"  ></i>

Working Demo

【讨论】：

第一个选项有效。几乎。它按预期工作，但控制台出现错误：ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'green-icon: true'. Current value: 'green-icon: false'. 它在页面加载时发生
你能检查一下我添加的演示吗，是其他原因导致了这个问题，你也可以在 stackbiltz 中分享你的代码
演示看起来不错。但它也按预期对我有用。问题是在 Chrome 中打开开发人员工具时。我突然看到有错误，虽然它在客户端工作
是的，ExpressionChangedAfterItHasBeenCheckedError 可能由于各种原因而发生。你能在stackbiltz中展示你的完整代码吗？正如您在我分享的演示中看到的那样，在我的情况下并没有发生。
是的。我会尽快做到这一点..这是我第一次上传到 stackblitz

【解决方案3】：

ChangeDetectionRef修复的错误。

import {ChangeDetectorRef } from '@angular/core';

constructor( private cdref: ChangeDetectorRef ) {}
ngOnInit() {
this.cdref.detectChanges();
 }

【讨论】：