изменить стиль недействительным && потрогал

Question

Я пытаюсь изменить стиль тега i, когда другое поле имеет значение touched и invalid, как указано ниже, но с тегом 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

ошибка исправлена ​​ChangeDetectionRef.

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

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

Answer 3

Попробуйте так:

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

Рабочая демонстрация