Angular material form field input - green border when input is valid

Question

I am trying to change the border of a mat-form-field to green when the input is valid without overriding CSS classes and I was sure I am missing an easy trick.

Default behaviour when a valid field value is entered:

Desired behaviour when a valid field value is entered (same or similar style as when input is active):

Answer 1

I think you can use color property in mat-form-field element in case of you are using material theming

Answer 2

I found a solution which works for me so far. I'm no css pro, so if this can have any side effects I'm happy to learn about it.

Edit: I overread the part where you said no CSS overrides, here is a thread with different ways for changing the border-color, maybe there is some answer that is acceptable for you.

style.css:

   mat-form-field {
      // &.ng-valid {
      &.mat-form-field-valid { <- I have custom async validators which execute on submit so I just add a custom class when the form is valid
        .mat-form-field-outline {
          color: green !important;
          border-width: 2px;
        }
     
        .mat-form-field-label {
          color: green;
        }

        .mat-form-field-outline-start {
          border-width: 2px;
        }
    
        .mat-form-field-outline-gap {
          border-width: 2px;
        }
    
        .mat-form-field-outline-end {
          border-width: 2px;
        }
      }
    }

html:

<mat-form-field appearance="outline" [ngClass]="{'mat-form-field-valid': form?.valid }">