angular-material - mat-form-field 必须包含一个 MatFormFieldControl。即使我添加了 MatFormFieldModule

Question

在这里，我是 Angular Material 的新手，请帮助我为什么会出错。我从https://material.angular.io/components/form-field/examples复制了代码

<div class="example-container">
  <mat-form-field>
    <input matInput placeholder="Input">
  </mat-form-field>

  <mat-form-field>
    <textarea matInput placeholder="Textarea"></textarea>
  </mat-form-field>

  <mat-form-field>
    <mat-select placeholder="Select">
      <mat-option value="option">Option</mat-option>
    </mat-select>
  </mat-form-field>
</div>

这是我从该 URL App.module.ts复制的相同代码

import {MatFormFieldModule} from '@angular/material/form-field';
import {MatInputModule} from '@angular/material/input';
  imports: [
MatFormFieldModule,MatInputModule]

Answer 1

看起来你忘记了MatSelectModule：

import {MatFormFieldModule} from '@angular/material/form-field';
import {MatInputModule} from '@angular/material/input';
import {MatSelectModule} from '@angular/material/select';
...
imports: [MatFormFieldModule,MatInputModule,MatSelectModule]

Answer 2

尝试删除输入框的 placeholder="Input"。它对我有用，试一试。

Answer 3

In case this helps, here is my app.module.ts for my app using material:

import {
  MatFormFieldModule,
  MatInputModule,
} from '@angular/material';

....

@NgModule({
  imports: [
    .....,
    MatFormFieldModule,
    MatInputModule,
    .....,
  ],
    .....
})
export class AppModule { }

Answer 4

从“@angular/material”导入 {MatInputModule}；

@NgModule({

进口：[

MatInputModule

]，出口：[ MatInputModule

] })

在 app.module.ts 文件中

Answer 5

从输入标签中删除占位符。

而不是使用占位符，您可以使用

<mat-label>.....</mat-label>

这是代码：

 <mat-form-field appearance="outline">
       <input matInput required />
       <mat-label>Username</mat-label>
 </mat-form-field>