1

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.

ani
  • 446
  • 1
  • 9
  • 31

1 Answers1

2
::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.

Mir entafaz Ali
  • 927
  • 6
  • 13
  • Yeah.. I was using ViewEncapsulation:none in my components and forgot to add over here in particular component .. Thanks for pointing out. – ani May 01 '21 at 18:14
  • Can we apply the same using ngClass on mat form field. Something like [ngClass]=".mat-form-field-flex : 'onCostBelowAvg' " ? – ani May 01 '21 at 18:17
  • Yes you can definitely add a class on mat-form-field by using ngClass but it won't be possible to get your desired result. Since you must apply the css when the form is invalid right. – Mir entafaz Ali May 02 '21 at 05:06
  • Kindly upvote the answer if it was useful for you. – Mir entafaz Ali May 02 '21 at 05:06