change style invalid && touched

Question

I'm trying to change an i tag style when another field is touched and invalid as follow but nothing really changes with i tag, only the input tag changes.

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>

I'm assuming I'm missing something with my Angular version. Perhaps something was deprecated?

Answer 1

the error fixed by ChangeDetectionRef.

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

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