mat-form-field must contain a MatFormFieldControl error when using <mat-select> or <mat-option>

[Mudathiralawi]

Which @angular/* package(s) are the source of the bug?

forms, Don't known / other

Is this a regression?

Yes

Description

When using with (and its child ), the app throws the following error and renders the page incorrectly:
core.mjs:6537 ERROR Error: mat-form-field must contain a MatFormFieldControl.
at getMatFormFieldMissingControlError
at _MatFormField._assertFormFieldControl
at _MatFormField.ngAfterContentInit
This happens despite following all the official Angular Material integration steps. It breaks rendering completely. To test futher i used pages copied from https://material.angular.dev/components/select/overview#select-overview and error still persists. And the project is not new and not the first time to use . I used is various pages and i did implement module changing commands like ng update or npm i.

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

chunk-35ENWJA4.js:55 ERROR Error: mat-form-field must contain a MatFormFieldControl.
    at getMatFormFieldMissingControlError (chunk-MPYZLQ3B.js?v=c9dc4972:746:10)
    at _MatFormField._assertFormFieldControl (chunk-MPYZLQ3B.js?v=c9dc4972:1000:13)
    at _MatFormField.ngAfterContentChecked (chunk-MPYZLQ3B.js?v=c9dc4972:903:10)

entities.component.ts:68 ERROR Error: mat-form-field must contain a MatFormFieldControl.
    at getMatFormFieldMissingControlError (chunk-MPYZLQ3B.js?v=c9dc4972:746:10)
    at _MatFormField._assertFormFieldControl (chunk-MPYZLQ3B.js?v=c9dc4972:1000:13)
    at _MatFormField.ngAfterContentChecked (chunk-MPYZLQ3B.js?v=c9dc4972:903:10)

Please provide the environment you discovered this bug in (run ng version)

_                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 19.2.11
Node: 22.12.0
Package Manager: npm 10.9.0
OS: win32 x64

Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1902.11 (cli-only)
@angular-devkit/core         19.2.11 (cli-only)
@angular-devkit/schematics   19.2.11 (cli-only)

Anything else?

Key Points:

• works fine with native or <textarea>.
• As soon as you place a or even just a inside, the error appears.
• The page breaks completely — rendering is either messed up or halted.
• This behavior is consistent regardless of static or reactive forms.
• No custom MatFormFieldControl implementation is being used.
• The same modules are properly imported, including ReactiveFormsModule, MatFormFieldModule, MatSelectModule, etc.
  Let me know if you need a StackBlitz demo — I can prepare that too.

[geromegrignon]

MatFormField expects to use ngModel or Reactive Forms. The error is usually displayed when there is no form binding on the field. If you still encounter the issue by following this requirement, please provide a Stackblitz reproduction.