更改样式无效 && 触摸

Question

当另一个字段被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 版本缺少一些东西。也许有些东西被弃用了？

Answer 1

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

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

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

Answer 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>

工作演示

Answer 3

由ChangeDetectionRef修复的错误。

import {ChangeDetectorRef } from '@angular/core';
constructor( private cdref: ChangeDetectorRef ) {}
ngOnInit() {
this.cdref.detectChanges();
}