{"record":{"id":"296203e1f62ffa61","repo":"angular/components","slug":"matformfield-invalid-appearance-newappearance","errorCode":null,"errorMessage":"MatFormField: Invalid appearance \"${newAppearance}\", valid values are \"fill\" or \"outline\".","messagePattern":"MatFormField: Invalid appearance \"(.+?)\", valid values are \"fill\" or \"outline\"\\.","errorType":"validation","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"src/material/form-field/form-field.ts","lineNumber":276,"sourceCode":"      // For backwards compatibility. Custom form field controls or directives might set\n      // the \"floatLabel\" input and expect the form field view to be updated automatically.\n      // e.g. autocomplete trigger. Ideally we'd get rid of this and the consumers would just\n      // emit the \"stateChanges\" observable. TODO(devversion): consider removing.\n      this._changeDetectorRef.markForCheck();\n    }\n  }\n  private _floatLabel!: FloatLabelType;\n\n  /** The form field appearance style. */\n  @Input()\n  get appearance(): MatFormFieldAppearance {\n    return this._appearanceSignal();\n  }\n  set appearance(value: MatFormFieldAppearance) {\n    const newAppearance = value || this._defaults?.appearance || DEFAULT_APPEARANCE;\n    if (typeof ngDevMode === 'undefined' || ngDevMode) {\n      if (newAppearance !== 'fill' && newAppearance !== 'outline') {\n        throw new Error(\n          `MatFormField: Invalid appearance \"${newAppearance}\", valid values are \"fill\" or \"outline\".`,\n        );\n      }\n    }\n    this._appearanceSignal.set(newAppearance);\n  }\n  private _appearanceSignal = signal<MatFormFieldAppearance>(DEFAULT_APPEARANCE);\n\n  /**\n   * Whether the form field should reserve space for one line of hint/error text (default)\n   * or to have the spacing grow from 0px as needed based on the size of the hint/error content.\n   * Note that when using dynamic sizing, layout shifts will occur when hint/error text changes.\n   */\n  @Input()\n  get subscriptSizing(): SubscriptSizing {\n    return this._subscriptSizing || this._defaults?.subscriptSizing || DEFAULT_SUBSCRIPT_SIZING;\n  }\n  set subscriptSizing(value: SubscriptSizing) {","sourceCodeStart":258,"sourceCodeEnd":294,"githubUrl":"https://github.com/angular/components/blob/0411926e7d8ae06b32236ec1048a888cfad5abf2/src/material/form-field/form-field.ts#L258-L294","documentation":"MatFormField's appearance setter validates that the resolved appearance is 'fill' or 'outline' and throws in dev mode otherwise. The value may come from the input binding, MatFormFieldDefaultOptions, or the DEFAULT_APPEARANCE fallback, so a bad default can also trigger it. It protects against silently rendering an unsupported form-field style.","triggerScenarios":"Binding [appearance]=\"'standard'\" (removed in newer Angular Material versions) or any string other than 'fill'/'outline'; setting appearance: 'legacy'/'standard' in MAT_FORM_FIELD_DEFAULT_OPTIONS; passing a misspelled or dynamically-computed value.","commonSituations":"Upgrading from Angular Material <15 where 'legacy', 'standard', 'outline' were valid — code or theme defaults now fail validation; a config object read from JSON/env supplying an invalid appearance; typos like 'filled'.","solutions":["Change the value to 'fill' or 'outline'","Check MAT_FORM_FIELD_DEFAULT_OPTIONS for an outdated appearance value and update it","If migrating from 'standard', choose 'outline' (closest visual equivalent) or 'fill'","Note validation only runs in dev mode (ngDevMode); verify with a production build whether it silently misbehaves"],"exampleFix":"// before\n<mat-form-field appearance=\"standard\">\n// after\n<mat-form-field appearance=\"outline\">","handlingStrategy":"validation","validationCode":"const VALID_APPEARANCES = ['fill', 'outline'] as const;\nfunction isValidAppearance(v: unknown): v is 'fill' | 'outline' {\n  return typeof v === 'string' && (VALID_APPEARANCES as readonly string[]).includes(v);\n}\nconst appearance = options.appearance;\nif (appearance != null && !isValidAppearance(appearance)) {\n  throw new Error(`appearance must be 'fill' or 'outline', got: ${appearance}`);\n}","typeGuard":"function isMatFormFieldAppearance(v: unknown): v is 'fill' | 'outline' {\n  return v === 'fill' || v === 'outline';\n}","tryCatchPattern":"try {\n  field.appearance = userAppearance as MatFormFieldAppearance;\n} catch (e) {\n  if (String(e?.message).includes('Invalid appearance')) {\n    console.warn(`Unsupported appearance \"${userAppearance}\"; using \"outline\"`);\n    field.appearance = 'outline';\n  } else throw e;\n}","preventionTips":["Type appearance values as MatFormFieldAppearance so invalid strings fail at compile time","After migrating from Material <15, replace 'legacy'/'standard' with 'outline'/'fill'","Audit MAT_FORM_FIELD_DEFAULT_OPTIONS for outdated appearance values","Render appearance from a typed constant, never raw strings from JSON/config without validation"],"tags":["angular","material","form-field","validation","api-change"],"backgroundTag":"invalid-enum-value","analyzedSha":"0411926e7d8ae06b32236ec1048a888cfad5abf2","analyzedAt":"2026-08-31T11:58:23.400Z","schemaVersion":2},"datasetVersion":"2026-08-31T14:17:45.589Z"}