From 7736515f1077b0ca6e991bd388829fb5549f546e Mon Sep 17 00:00:00 2001
From: Miles Malerba <mmalerba@google.com>
Date: Tue, 31 May 2022 23:13:09 -0700
Subject: [PATCH] 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
---
 src/material-experimental/mdc-form-field/form-field.ts | 10 +++++++++-
 src/material/form-field/testing/shared.spec.ts         |  2 +-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/material-experimental/mdc-form-field/form-field.ts b/src/material-experimental/mdc-form-field/form-field.ts
index b0f516563e04..b35022ae77af 100644
--- 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
index 1f6b76d02d5e..b29b3e072c70 100644
--- 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">