fix(material-experimental/mdc-form-field): ensure appearance is valid (#24963)

* fix(material-experimental/mdc-form-field): ensure appearance is valid

* fix(material-experimental/mdc-form-field): address feedback

Author: mmalerba

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

@@ -211,7 +211,15 @@ export class MatFormField
   }
   set appearance(value: MatFormFieldAppearance) {
     const oldValue = this._appearance;
-    this._appearance = value || this._defaults?.appearance || DEFAULT_APPEARANCE;
+    const newAppearance = value || this._defaults?.appearance || DEFAULT_APPEARANCE;
+    if (typeof ngDevMode === 'undefined' || ngDevMode) {
+      if (newAppearance !== 'fill' && newAppearance !== 'outline') {
+        throw new Error(
+          `MatFormField: Invalid appearance "${newAppearance}", valid values are "fill" or "outline".`,
+        );
+      }
+    }
+    this._appearance = newAppearance;
     if (this._appearance === 'outline' && this._appearance !== oldValue) {
       this._refreshOutlineNotchWidth();
 

src/material/form-field/testing/shared.spec.ts

@@ -266,7 +266,7 @@ export function runHarnessTests(
       <span matTextSuffix *ngIf="isMdc">suffix_text</span>
     </mat-form-field>
 
-    <mat-form-field appearance="standard" color="warn" id="with-errors">
+    <mat-form-field [appearance]="isMdc ? 'fill' : 'standard'" color="warn" id="with-errors">
       <span class="custom-control">Custom control harness</span>
       <input matInput [formControl]="requiredControl">