fix(material/form-field): add hasFloatingLabel input and update classes if mat-label is added and removed dynamically

Currently, when `mat-Label` is added dynamically initially its not visible in DOM, this fix will add/remove classes  for the same.

Fixes #29939

Author: mistrykaran91

goldens/material/form-field/index.api.md

@@ -16,8 +16,10 @@ import * as i2 from '@angular/cdk/observers';
 import { InjectionToken } from '@angular/core';
 import { NgControl } from '@angular/forms';
 import { Observable } from 'rxjs';
+import { OnChanges } from '@angular/core';
 import { OnDestroy } from '@angular/core';
 import { QueryList } from '@angular/core';
+import { SimpleChanges } from '@angular/core';
 
 // @public
 export type FloatLabelType = 'always' | 'auto';

goldens/material/input/index.api.md

@@ -25,6 +25,7 @@ import { OnChanges } from '@angular/core';
 import { OnDestroy } from '@angular/core';
 import { Platform } from '@angular/cdk/platform';
 import { QueryList } from '@angular/core';
+import { SimpleChanges } from '@angular/core';
 import { Subject } from 'rxjs';
 import { WritableSignal } from '@angular/core';
 

src/material/form-field/directives/notched-outline.ts

@@ -13,6 +13,8 @@ import {
   ElementRef,
   Input,
   NgZone,
+  OnChanges,
+  SimpleChanges,
   ViewChild,
   ViewEncapsulation,
   inject,
@@ -36,22 +38,30 @@ import {
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
 })
-export class MatFormFieldNotchedOutline implements AfterViewInit {
+export class MatFormFieldNotchedOutline implements AfterViewInit, OnChanges {
   private _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
   private _ngZone = inject(NgZone);
 
   /** Whether the notch should be opened. */
   @Input('matFormFieldNotchedOutlineOpen') open: boolean = false;
 
+  /** Whether the floating label is present. */
+  @Input('matFormFieldHasFloatingLabel') hasFloatingLabel: boolean = false;
+
   @ViewChild('notch') _notch: ElementRef;
 
+  /** Gets the HTML element for the floating label. */
+  get element(): HTMLElement {
+    return this._elementRef.nativeElement;
+  }
+
   constructor(...args: unknown[]);
   constructor() {}
 
   ngAfterViewInit(): void {
-    const label = this._elementRef.nativeElement.querySelector<HTMLElement>('.mdc-floating-label');
+    const label = this.element.querySelector<HTMLElement>('.mdc-floating-label');
     if (label) {
-      this._elementRef.nativeElement.classList.add('mdc-notched-outline--upgraded');
+      this.element.classList.add('mdc-notched-outline--upgraded');
 
       if (typeof requestAnimationFrame === 'function') {
         label.style.transitionDuration = '0s';
@@ -60,7 +70,18 @@ export class MatFormFieldNotchedOutline implements AfterViewInit {
         });
       }
     } else {
-      this._elementRef.nativeElement.classList.add('mdc-notched-outline--no-label');
+      this.element.classList.add('mdc-notched-outline--no-label');
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (
+      changes['hasFloatingLabel'] &&
+      this.hasFloatingLabel &&
+      this.element.classList.contains('mdc-notched-outline--no-label')
+    ) {
+      this.element.classList.add('mdc-notched-outline--upgraded');
+      this.element.classList.remove('mdc-notched-outline--no-label');
     }
   }
 

src/material/form-field/form-field.html

@@ -50,7 +50,11 @@
   }
   <div class="mat-mdc-form-field-flex">
     @if (_hasOutline()) {
-      <div matFormFieldNotchedOutline [matFormFieldNotchedOutlineOpen]="_shouldLabelFloat()">
+      <div
+        matFormFieldNotchedOutline
+        [matFormFieldNotchedOutlineOpen]="_shouldLabelFloat()"
+        [matFormFieldHasFloatingLabel]="_hasFloatingLabel()"
+      >
         @if (!_forceDisplayInfixLabel()) {
           <ng-template [ngTemplateOutlet]="labelTemplate"></ng-template>
         }
@@ -96,8 +100,8 @@
 </div>
 
 <div
-    class="mat-mdc-form-field-subscript-wrapper mat-mdc-form-field-bottom-align"
-    [class.mat-mdc-form-field-subscript-dynamic-size]="subscriptSizing === 'dynamic'"
+  class="mat-mdc-form-field-subscript-wrapper mat-mdc-form-field-bottom-align"
+  [class.mat-mdc-form-field-subscript-dynamic-size]="subscriptSizing === 'dynamic'"
 >
   @let subscriptMessageType = _getSubscriptMessageType();
 
@@ -106,10 +110,12 @@
     as having it appear post render will not consistently work. We also do not want to add
     additional divs as it causes styling regressions.
     -->
-  <div aria-atomic="true" aria-live="polite" 
-      [class.mat-mdc-form-field-error-wrapper]="subscriptMessageType === 'error'"
-      [class.mat-mdc-form-field-hint-wrapper]="subscriptMessageType === 'hint'"
-    >
+  <div
+    aria-atomic="true"
+    aria-live="polite"
+    [class.mat-mdc-form-field-error-wrapper]="subscriptMessageType === 'error'"
+    [class.mat-mdc-form-field-hint-wrapper]="subscriptMessageType === 'hint'"
+  >
     @switch (subscriptMessageType) {
       @case ('error') {
         <ng-content select="mat-error, [matError]"></ng-content>