cssmat-form-fieldangular-material-8mat-error

Is it possible to make entire border of input mat form field fill red on validation error


In my form i have email field which is customized and i cant use outline appearance input field .

<mat-form-field appearance="fill">
    <mat-label>Enter your email</mat-label>
    <input matInput placeholder="pat@example.com" [formControl]="email" required>
    <mat-error *ngIf="email.invalid">{{getErrorMessage()}}</mat-error>
  </mat-form-field>

On validation if there is an error , it appears as below

enter image description here

Is it possible to make it appear as below highlighting entire input field

enter image description here

I could see lot of example for outline appearance form field but not for fill appearance . Can someone guide. TIA

Update:

tried below css still i couldn't able to achieve .

.mat-form-field-appearance-fill .mat-form-field-invalid .mat-form-field-flex {
  border: 4px solid red !important ;
}

would be helpful if there is any hack to achieve this.


Solution

  • ::ng-deep .mat-form-field-invalid .mat-form-field-flex {
      border: 2px solid red !important;
      border-bottom: none;
    }
    

    You need to use ::ng-deep to get the desired result. Demo Link. Let me know if face any issue.