{"record":{"id":"3093885768dfe1b4","repo":"angular/components","slug":"mat-form-field-must-contain-a-matformfieldcontrol","errorCode":null,"errorMessage":"mat-form-field must contain a MatFormFieldControl.","messagePattern":"mat-form-field must contain a MatFormFieldControl\\.","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"error","filePath":"src/material/form-field/form-field.ts","lineNumber":544,"sourceCode":"      this._processHints();\n      this._changeDetectorRef.markForCheck();\n    });\n\n    // Update the aria-described by when the number of errors changes.\n    this._errorChildren.changes.subscribe(() => {\n      this._syncDescribedByIds();\n      this._changeDetectorRef.markForCheck();\n    });\n\n    // Initial mat-hint validation and subscript describedByIds sync.\n    this._validateHints();\n    this._syncDescribedByIds();\n  }\n\n  /** Throws an error if the form field's control is missing. */\n  private _assertFormFieldControl() {\n    if (!this._control && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n      throw getMatFormFieldMissingControlError();\n    }\n  }\n\n  private _updateFocusState() {\n    const controlFocused = this._control.focused;\n\n    // Usually the MDC foundation would call \"activateFocus\" and \"deactivateFocus\" whenever\n    // certain DOM events are emitted. This is not possible in our implementation of the\n    // form field because we support abstract form field controls which are not necessarily\n    // of type input, nor do we have a reference to a native form field control element. Instead\n    // we handle the focus by checking if the abstract form field control focused state changes.\n    if (controlFocused && !this._isFocused) {\n      this._isFocused = true;\n      this._lineRipple?.activate();\n    } else if (!controlFocused && (this._isFocused || this._isFocused === null)) {\n      this._isFocused = false;\n      this._lineRipple?.deactivate();\n    }","sourceCodeStart":526,"sourceCodeEnd":562,"githubUrl":"https://github.com/angular/components/blob/0411926e7d8ae06b32236ec1048a888cfad5abf2/src/material/form-field/form-field.ts#L526-L562","documentation":"A <mat-form-field> requires exactly one form-field control (MatInput, MatSelect, MatChips, etc.) projected inside it. This error fires during ngAfterContentInit/ngAfterContentChecked when the field finds no projected MatFormFieldControl, meaning the field cannot wire label focus, hint, and error state.","triggerScenarios":"Using mat-form-field with a plain <input>/<textarea> lacking matInput; wrapping unsupported elements (native select, button, div content); content projected incorrectly so the control query (ContentChild) is null.","commonSituations":"Forgetting the matInput directive on an input inside mat-form-field; using mat-form-field around a non-Material control; placing the input outside the form-field's content projection (e.g. after </mat-form-field>); typos like [matInput] without importing MatInputModule.","solutions":["Add the matInput directive to the input/textarea inside the form field and import MatInputModule","Replace unsupported inner elements with a supported MatFormFieldControl (MatSelect, MatChipList, etc.) or drop mat-form-field","Ensure the control is directly projected inside <mat-form-field> (not behind ngTemplateOutlet or unrelated wrappers without proper declaration)","Verify the Material form-field/input modules are imported in the standalone component or NgModule"],"exampleFix":"// before\n<mat-form-field>\n  <input type=\"text\" name=\"user\">\n</mat-form-field>\n// after\n<mat-form-field>\n  <mat-label>User</mat-label>\n  <input matInput type=\"text\" name=\"user\">\n</mat-form-field>","handlingStrategy":"validation","validationCode":"// template audit: every <mat-form-field> must contain an element with matInput\n// or another MatFormFieldControl (mat-select, mat-chip-grid, etc.)\n<mat-form-field>\n  <input matInput [formControlName]=\"'name'\">\n</mat-form-field>","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Always pair mat-form-field with matInput on the inner control","Import MatInputModule (and MatFormFieldModule) in the component or module","Never wrap plain native selects/buttons in mat-form-field","Run template lint rules or visual smoke tests on forms"],"tags":["angular","material","form-field","template","configuration"],"backgroundTag":"missing-form-field-control","analyzedSha":"0411926e7d8ae06b32236ec1048a888cfad5abf2","analyzedAt":"2026-08-31T11:58:23.400Z","schemaVersion":2},"datasetVersion":"2026-08-31T14:17:45.589Z"}