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.

Gobika · Accepted Answer · 2021-06-06 16:01:26Z

4

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

edited Jun 6, 2021 at 16:01

answered Jun 6, 2021 at 15:59

Gobika

3242 silver badges4 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

angular reactive forms - styling field color on invalid input

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related