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(
suffix_text
-
+
Custom control harness