{"record":{"id":"a131ae11ade49ffd","repo":"angular/components","slug":"input-type-type-isn-t-supported-by-matinput","errorCode":null,"errorMessage":"Input type \"${type}\" isn't supported by matInput.","messagePattern":"Input type \"(.+?)\" isn't supported by matInput\\.","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"error","filePath":"src/material/input/input.ts","lineNumber":491,"sourceCode":"      this._previousPlaceholder = placeholder;\n      placeholder\n        ? element.setAttribute('placeholder', placeholder)\n        : element.removeAttribute('placeholder');\n    }\n  }\n\n  /** Gets the current placeholder of the form field. */\n  protected _getPlaceholder(): string | null {\n    return this.placeholder || null;\n  }\n\n  /** Make sure the input is a supported type. */\n  protected _validateType() {\n    if (\n      MAT_INPUT_INVALID_TYPES.indexOf(this._type) > -1 &&\n      (typeof ngDevMode === 'undefined' || ngDevMode)\n    ) {\n      throw getMatInputUnsupportedTypeError(this._type);\n    }\n  }\n\n  /** Checks whether the input type is one of the types that are never empty. */\n  protected _isNeverEmpty() {\n    return this._neverEmptyInputTypes.indexOf(this._type) > -1;\n  }\n\n  /** Checks whether the input is invalid based on the native validation. */\n  protected _isBadInput() {\n    // The `validity` property won't be present on platform-server.\n    let validity = (this._elementRef.nativeElement as HTMLInputElement).validity;\n    return validity && validity.badInput;\n  }\n\n  /**\n   * Implemented as part of MatFormFieldControl.\n   * @docs-private","sourceCodeStart":473,"sourceCodeEnd":509,"githubUrl":"https://github.com/angular/components/blob/0411926e7d8ae06b32236ec1048a888cfad5abf2/src/material/input/input.ts#L473-L509","documentation":"MatInput validates its type input against MAT_INPUT_INVALID_TYPES (button, checkbox, color, file, hidden, image, radio, range, reset, submit) because matInput requires a text-like field that participates in form control value binding. Setting an unsupported type throws getMatInputUnsupportedTypeError naming the type.","triggerScenarios":"Writing <input matInput type=\"checkbox\">, type=\"file\", type=\"radio\", etc., or binding [type]=\"expr\" where the expression evaluates to one of the invalid types.","commonSituations":"Wanting a checkbox/file inside a mat-form-field (should use mat-checkbox or a plain input); dynamic type inputs that switch to 'file' for uploads; copy-pasting native input attributes onto matInput.","solutions":["Remove matInput and the mat-form-field wrapper for non-text controls; use <mat-checkbox>, <mat-radio-group>, <mat-select>, or a plain <input type=\"file\">.","Use type=\"text\" with a pattern/input-mode, or a dedicated component (mat-chip-list, mat-slider for range).","If type is dynamic, guard the binding so invalid types never reach the input: [type]=\"isValidType(t) ? t : 'text'\"."],"exampleFix":"// before\n<mat-form-field><input matInput type=\"file\" (change)=\"onFile($event)\"></mat-form-field>\n// after\n<input type=\"file\" (change)=\"onFile($event)\">","handlingStrategy":"type-guard","validationCode":"const MAT_INPUT_INVALID_TYPES = ['button','checkbox','color','file','hidden','image','radio','range','reset','submit'];\nif (MAT_INPUT_INVALID_TYPES.includes(type)) {\n  throw new Error(`type \"${type}\" requires a non-matInput control`);\n}","typeGuard":"function isSupportedMatInputType(t: string): boolean {\n  return !['button','checkbox','color','file','hidden','image','radio','range','reset','submit'].includes(t);\n}","tryCatchPattern":"try {\n  component.type = desiredType;\n  component._validateType();\n} catch (e) {\n  if ((e as Error).message.includes(\"isn't supported by matInput\")) {\n    console.warn(`Falling back to text for type \"${desiredType}\"`);\n    component.type = 'text';\n  } else { throw e; }\n}","preventionTips":["Use MatCheckbox/MatRadio/MatSelect instead of matInput for those control kinds","Keep file inputs outside mat-form-field as plain inputs","If [type] is dynamic, intersect the value with supported types before binding"],"tags":["angular-material","mat-input","form-field","validation"],"backgroundTag":"unsupported-input-type","analyzedSha":"0411926e7d8ae06b32236ec1048a888cfad5abf2","analyzedAt":"2026-08-31T11:58:23.400Z","schemaVersion":2},"datasetVersion":"2026-08-31T14:17:45.589Z"}