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
angular · Jun 1, 2022 · 7736515 · 7736515
1 parent 299b2f2
commit 7736515
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/src/material-experimental/mdc-form-field/form-field.ts b/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();
 

diff --git a/src/material/form-field/testing/shared.spec.ts b/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">