md-form-field 不是已知元素 Angular Material答案

【问题标题】：md-form-field is not a known element Angular Materialmd-form-field 不是已知元素 Angular Material
【发布时间】：2018-02-20 16:09:50
【问题描述】：

错误

Uncaught Error: Template parse errors:
'md-form-field' is not a known element:
 1. If 'md-form-field' is an Angular component, then verify that it is part 
of this module.
2. If 'md-form-field' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' 
to the '@NgModule.schemas' of this component to suppress this message. ("

我已经用角度材料实现了角度输入

网址https://material.angular.io/components/input/overview

html

       <form class="example-form">
      <md-form-field class="example-full-width">
     <input mdInput placeholder="Favorite food" value="Sushi">
    </md-form-field>
    </form>

谷歌搜索后我找到了链接

Angular Material2 : 'md-form-field' is not a known element

上面写着

  import { MdFormFieldModule } from '@angular/material';

  @NgModule({
  imports: [
  ....
  MdFormFieldModule,
   ....
 ]

app.module.ts 导入后

从'@angular/material'导入{ MdFormFieldModule }；

    ERROR in D:/frontend/src/app/app.module.ts (97,10): Module '"D:/frontendapp/node_modules/@angular/material/material"' has no exported member 'MdFormFieldModule'.

谁能建议我缺少什么。

【问题讨论】：

确保您的@angular/material 版本是2.0.0-beta.10 并且没有MdFormFieldModule，只需导入MdInputModule 并将其添加到导入数组中。
@Pengyy MdFormFieldModule 是在 beta.10 中引入的，它必须与 MdInputModule 一起在模块导入中导入

标签： javascript angular angular-material

【解决方案1】：

导入这个模块：MdInputModule 然后使用此代码片段并享受：

<md-input-container>
   <input mdInput placeholder="User">
</md-input-container>

【讨论】：

【解决方案2】：

添加 schemas: [CUSTOM_ELEMENTS_SCHEMA] 和 import {MdInputModule} from '@angular/material' 而不是 MdFormFieldModule 它已过时。

@NgModule({
    declarations: [
        ..
    ],
    imports: [
        MdInputModule,
        ..
    ],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

到你的模块

【讨论】：

【解决方案3】：

如果您在较新版本的 Angular 中遇到该错误，我发现 AngularMaterial indicates 在最新版本中已将组件标签（无论您想如何称呼它）从 md-form-field 更改为 mat-form-field。注意mat-form-field 中的mat。我正在从版本 2.0.0-beta.3 更新到版本 5.2.5。 This breaking change appears to have come in 2.0.0-beta.12.

虽然我需要在 app.module.ts 文件中导入 import { MatInputModule } from '@angular/material';，但 .html 文件中的组件标签更改缓解了控制台错误 'md-form-field' is not a known element:。

注意：我在将我的 md-input-container 标签升级到 md-form-field 标签时遇到了这个问题，我花了很多时间才意识到这些标签已经再次更新为新的 mat-form-field。无论如何，如果您要从使用 md-input-container 或 md-form-field 的旧版本 Material 更新到新版本的 Material，我建议您尽可能直接更新到 mat-form-field。

注意 2：请务必注意任何不相关的更新 - 例如更改指令名称。例如，如果您有任何 mdInput 的案例，您可能需要将它们更改为 matInput。像那样的东西。通过您的代码，那些md 到mat 的更改可能是多产的。如果您的编辑器具有跨多个文件的“全部替换”功能，那么它将是您最好的朋友。至少md 不是一对常见的字母，除了在旧的 AngularMaterial 世界中。

【讨论】：