ngClass not applying the class?

Issue

When I do:

           <mat-form-field class="mat-form-field-invalid">
                <mat-label>ID</mat-label>
                <input matInput [(ngModel)]="this.testData">
            </mat-form-field>

It puts a red underline on the field, but when I do:

           <mat-form-field [ngClass]="{'mat-form-field-invalid':true}">
                <mat-label>ID</mat-label>
                <input matInput [(ngModel)]="this.testData">
            </mat-form-field>

It doesn’t put the red underline. Am I missing something here?

Solution

ngClass doesn’t work with <mat-form-field>
You can use below syntax-

<mat-form-field [class.mat-form-field-invalid]="true">

Answered By – Sheshaj Awasthi

Answer Checked By – Timothy Miller (AngularFixing Admin)

Leave a Reply

Your email address will not be published.