Mat-form-field label not floating after upgrading to Angular Material 16

I've recently upgraded a project to Angular 16 from Angular 15. So far the logics are working fine however there are some issues faced with the mat-form-field where the label is not floating. The same code is working fine in v12. Angular automatically set the dependencies to use legacy but still the component is breaking.

angular.json

{
"projects": {
"architect": {
"build": {
"options": {
"styles": [
"@angular/material/prebuilt-themes/indigo-pink.css",
"bootstrap/dist/css/bootstrap.min.css",
"src/styles.scss",
"src/assets/css/other_styles.scss"
]
}
}
}
}
}


Below is the material dependencies I've imported -

import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';


HTML code for the component:

<div class="loginform-block login-bg">
<div class="center-element loginform card">
<div class="loginform-header">SOME CONTENT
</div>
<div class="loginform-content">
<form [formGroup]="loginForm" (submit)="onSubmit()">
<div class="mb-3">
<mat-form-field appearance="legacy" class="w-100">
<mat-label>Username</mat-label>
<input autocomplete="off" matInput placeholder="Enter Username" id="username" formControlName="username"
autoCapitalize maxlength="10" />
<mat-error>Username Required</mat-error>
</mat-form-field>
</div>
<div class="mb-3">
<mat-form-field appearance="legacy" class="w-100">
<mat-label>Password</mat-label>
<input [type]="passwordHide ? 'password' : 'text'" matInput placeholder="Password" id="password"
formControlName="password" />
<mat-icon matSuffix (click)="passwordHide = !passwordHide" class="cursor-pointer">{{
passwordHide ? 'visibility_off' :
'visibility' }}</mat-icon>
<mat-error>Password Required</mat-error>
</mat-form-field>
</div>
<div class="loginform-action mb-3">
<button mat-raised-button color="primary" [disabled]="!loginForm.valid" class="iA-button">Login</button>
</div>
<div class="version-info text-center mt-2" *ngIf="version">Version: <strong
class="current-version">{{version}}</strong></div>
</form>
</div>
</div>
<div class="clearfix"></div>
</div>


OUTPUT:

Expected result: The label should float & the form field also shrinked a bit after upgrading. It should look like this -



Exampl is here - v12 fields

Continue reading...