更改样式无效 && 已触及

change style invalid && touched

当另一个字段为 touchedinvalid 时,我正在尝试更改 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 版本遗漏了一些东西。也许有些东西被弃用了?

删除模板中元素的引用,取而代之的是访问表单对象:

<input formControlName="CardOwnerName" name="CardOwnerName" class="form-control" placeholder="Card Owner Name" required>
get CardOwnerName() {
    return this./* form group name here */.get('CardOwnerName');
}

这样试试:

 <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

ChangeDetectionRef修正的错误。

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

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