How could I apply different colors for mat-form-field "formControl" depends on the state of it?

I have this HTML code:

<mat-form-field class="me-3" appearance="outline" class="filterText">
<mat-label [ngClass]="{'mat-label-error': form.get('result')?.invalid && form.get('result')?.touched}">
{{ 'evaluation_detail.result' | translate }}
</mat-label>
<mat-select id="result" formControlName="result" data-testid="result-select">
<mat-option *ngFor="let res of resultOptions" [value]="res.id">{{res.name | translate }}</mat-option>
</mat-select>
</mat-form-field>


Then, I have this css code:

::ng-deep .mat-primary:not(.ng-invalid) .mat-mdc-select-arrow {
color: red !important;
}
::ng-deep .mat-mdc-select-arrow {
color: var(--primary-color) !important;
}


I have been using this code trying to change colors of the mat-form-field depends on the state of it, but it is not working for me.

Continue reading...