ERROR 错误：使用 API 文档时，mat-form-field 必须包含 MatFormFieldControl？

Posted 2023-03-13

【中文标题】ERROR 错误：使用 API 文档时，mat-form-field 必须包含 MatFormFieldControl？

【英文标题】：ERROR Error: mat-form-field must contain a MatFormFieldControl while using API documentation?

【发布时间】：2019-12-22 15:54:51

【问题描述】：

我像这样导入了MatFormFieldModule：

    import  BrowserModule  from '@angular/platform-browser';
    import  NgModule  from '@angular/core';

    import  AppRoutingModule  from './app-routing.module';
    import  AppComponent  from './app.component';
    import  BrowserAnimationsModule  from '@angular/platform-browser/animations';
    //import  MaterialModule  from './material/material.module';
    import MatFormFieldModule from '@angular/material/form-field';

    @NgModule(
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,
        AppRoutingModule,
        BrowserAnimationsModule,
    //    MaterialModule,
        MatFormFieldModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    )
    export class AppModule  

在app.component.html 内我有（直接取自 API 文档）：

    <mat-form-field>
      <input matInput placeholder="Input">
    </mat-form-field>

ERROR Error: mat-form-field must contain a MatFormFieldControl.

有什么想法吗？

我得到了错误：

ERROR Error: mat-form-field must contain a MatFormFieldControl.

【问题讨论】：

这是否与：***.com/questions/46705101/… 有点相关？

【参考方案1】：

你也应该导入MatInputModule：

import MatInputModule from '@angular/material/input';

@NgModule(
  imports: [
    MatFormFieldModule,
    MatInputModule,
    ...
  ]
)

否则 Angular 不知道如何为提供 MatFormFieldControl 的 <input matInput 初始化指令：

@Directive(
  selector: `input[matInput], textarea[matInput], select[matNativeControl],
      input[matNativeControl], textarea[matNativeControl]`,
  ...
  providers: [provide: MatFormFieldControl, useExisting: MatInput],
)