angular reactive forms - styling field color on invalid input

Question

I'm using ReactiveForms and I can't seem to find a way to change the color of the form field outline when the input is invalid.

I need to change this color because the current red color isn't really optimal considering the background gradient, as you can see:

Here is my template:

<mat-form-field appearance="outline" hideRequiredMarker>
    <mat-label>{{ matLabel }}</mat-label>
    <input
        #input
        matInput
        type="{{ inputType }}"
        [formControl]="control"
        style="caret-color: white"
        autocomplete="off"
    />
    <mat-error style="color:white" *ngIf="control.invalid">{{ getErrorMessage() }}</mat-error>
    ...
</mat-form-field>

How can I change the outline color?

Thank you in advance.

Answer 1

Use :host::ng-deep to overwrite the angular material style

Try like this

:host ::ng-deep .mat-form-field-appearance-outline.mat-form-field-invalid .mat-form-field-outline-thick, 
:host ::ng-deep .mat-form-field.mat-form-field-invalid .mat-form-field-label, .mat-error {
      color: purple !important;
}