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
Is it possible to make it appear as below highlighting entire input field
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.
::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.