fix(material/form-field): update view when the control is swapped out (#33636)

(cherry picked from commit e9760b3)

Author: lazerg

src/material/form-field/form-field.ts

@@ -108,8 +108,7 @@ export const MAT_FORM_FIELD_DEFAULT_OPTIONS = new InjectionToken<MatFormFieldDef
 
 /** Styles that are to be applied to the label elements in the outlined appearance. */
 type OutlinedLabelStyles =
-  | [floatingLabelTransform: string, notchedOutlineWidth: number | null]
-  | null;
+  [floatingLabelTransform: string, notchedOutlineWidth: number | null] | null;
 
 /** Default appearance used by the form field. */
 const DEFAULT_APPEARANCE: MatFormFieldAppearance = 'fill';
@@ -401,6 +400,7 @@ export class MatFormField
       }
 
       this._previousControl = this._control;
+      this._changeDetectorRef.markForCheck();
     }
 
     // make sure the the control has been initialized.

src/material/input/input.spec.ts

@@ -458,6 +458,27 @@ describe('MatInput without forms', () => {
     expect(inputEl.disabled).toBe(true);
   });
 
+  it('should update the disabled styling when the form field control is swapped out', () => {
+    const fixture = TestBed.createComponent(MatInputWithSwappedControl);
+    fixture.detectChanges();
+
+    const wrapperEl = fixture.debugElement.query(
+      By.css('.mat-mdc-text-field-wrapper'),
+    )!.nativeElement;
+
+    expect(wrapperEl.classList.contains('mdc-text-field--disabled'))
+      .withContext(`Expected form field not to start out disabled.`)
+      .toBe(false);
+
+    fixture.componentInstance.disabled = true;
+    fixture.changeDetectorRef.markForCheck();
+    fixture.detectChanges();
+
+    expect(wrapperEl.classList.contains('mdc-text-field--disabled'))
+      .withContext(`Expected form field to look disabled after the control was swapped.`)
+      .toBe(true);
+  });
+
   it('should be able to set an input as being disabled and interactive', () => {
     const fixture = TestBed.createComponent(MatInputWithDisabled);
     fixture.componentInstance.disabled = true;
@@ -1746,6 +1767,23 @@ class MatInputWithDisabled {
   disabledInteractive = false;
 }
 
+@Component({
+  template: `
+    <mat-form-field>
+      @if (disabled) {
+        <input matInput [disabled]="true">
+      } @else {
+        <input matInput>
+      }
+    </mat-form-field>
+  `,
+  imports: [MatInputModule],
+  changeDetection: ChangeDetectionStrategy.Eager,
+})
+class MatInputWithSwappedControl {
+  disabled = false;
+}
+
 @Component({
   template: `<mat-form-field><input matInput [required]="required"></mat-form-field>`,
   imports: [MatInputModule],