模板解析错误：'md-form-field' 不是已知元素

Posted 2023-03-13

【中文标题】模板解析错误：\'md-form-field\' 不是已知元素

【英文标题】：Template parse errors: 'md-form-field' is not a known element模板解析错误：'md-form-field' 不是已知元素

【发布时间】：2018-02-07 19:30:33

【问题描述】：

我正在使用 Angular 4 和 Angular Material 2。对于以下代码：

<form>
  <md-form-field>
    <input mdInput [ngModel]="userName" placeholder="User" [formControl]="usernameFormControl">
    <md-error *ngIf="usernameFormControl.hasError('required')">
      This is <strong>required</strong>
    </md-error>
    <input mdInput [ngModel]="password" placeholder="Password" [formControl]="passwordFormControl">
    <md-error *ngIf="passwordFormControl.hasError('required')">
      This is <strong>required</strong>
    </md-error>
    <button md-raised-button color="primary" [disabled]="!usernameFormControl.valid || !passwordFormControl.valid">Login</button>
  </md-form-field>
</form>

我收到一个错误：

模板解析错误：'md-form-field' 不是已知元素： 1. 如果 'md-form-field' 是一个 Angular 组件，那么验证它是这个模块的一部分。 2. 如果“md-form-field”是一个 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”中 压制此消息。 (" [错误->]

你能帮我在哪里失踪吗？

以下是我的 app.module.ts 代码，我在其中导入了材料模块：

import  BrowserModule  from '@angular/platform-browser';
import  NgModule  from '@angular/core';
import  HttpModule  from '@angular/http';
import  FormsModule, ReactiveFormsModule  from '@angular/forms';

import  AppComponent  from './app.component';
import  LoginComponent  from './login.component';

import  BrowserAnimationsModule  from '@angular/platform-browser/animations';

import 
  MdAutocompleteModule,
  MdButtonModule,
  MdButtonToggleModule,
  MdCardModule,
  MdCheckboxModule,
  MdChipsModule,
  MdCoreModule,
  MdDatepickerModule,
  MdDialogModule,
  MdExpansionModule,
  MdGridListModule,
  MdIconModule,
  MdInputModule,
  MdListModule,
  MdMenuModule,
  MdNativeDateModule,
  MdPaginatorModule,
  MdProgressBarModule,
  MdProgressSpinnerModule,
  MdRadioModule,
  MdRippleModule,
  MdSelectModule,
  MdSidenavModule,
  MdSliderModule,
  MdSlideToggleModule,
  MdSnackBarModule,
  MdSortModule,
  MdTableModule,
  MdTabsModule,
  MdToolbarModule,
  MdTooltipModule
 from '@angular/material';

import CdkTableModule from '@angular/cdk';

@NgModule(
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpModule,
    FormsModule,
    ReactiveFormsModule,
    MdAutocompleteModule,
    MdButtonModule,
    MdButtonToggleModule,
    MdCardModule,
    MdCheckboxModule,
    MdChipsModule,
    MdCoreModule,
    MdDatepickerModule,
    MdDialogModule,
    MdExpansionModule,
    MdGridListModule,
    MdIconModule,
    MdInputModule,
    MdListModule,
    MdMenuModule,
    MdNativeDateModule,
    MdPaginatorModule,
    MdProgressBarModule,
    MdProgressSpinnerModule,
    MdRadioModule,
    MdRippleModule,
    MdSelectModule,
    MdSidenavModule,
    MdSliderModule,
    MdSlideToggleModule,
    MdSnackBarModule,
    MdSortModule,
    MdTableModule,
    MdTabsModule,
    MdToolbarModule,
    MdTooltipModule,
    CdkTableModule
  ],
  declarations: [
    AppComponent,
    LoginComponent
  ],
  providers: [],
  bootstrap: [AppComponent]
)
export class AppModule  

【参考方案1】：

更新：

自 2.0.0-beta.12 起，md 前缀已被移除，取而代之的是 mat 前缀。详情请见CHANGELOG：

所有“md”前缀已被删除。请参阅deprecation notice beta.11 注释了解更多信息。

更新后，<md-form-field>应改为<mat-form-field>。此外，MdFormFieldModule 和 MdInputModule 应更改为 MatFormFieldModule 和 MatInputModule：

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

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

这里是使用 2.0.0-beta.12 的 Updated StackBlitz 演示链接。

---

原文：

<md-form-field> 是在2.0.0-beta.10 中引入的。请参阅更新日志文档中的以下内容：

md-input-container 重命名为 md-form-field（同时仍在 向后兼容）。旧的选择器将在后续版本中删除。

这是完成CHANGELOG 的链接。

要使用 <md-form-field> 选择器，请确保您安装了 2.0.0-beta.10 版本的材料。此外，您需要在 AppModule 导入中导入 MdFormFieldModule 模块：

import  MdFormFieldModule  from '@angular/material';
import  MdInputModule  from '@angular/material';

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

对于任何偶然发现这个问题的人，这里是 StackBlitz 上的 working demo 的链接。

【讨论】：

作为 OP 案例的替代方案，导入 MdInputModule 也可以，因为该模块重新导出 MdFormFieldModule

我的材料版本为 2.0.0-beta.3，但我无法识别 MdFormFieldModule。你知道为什么吗？ MdInputModule 被识别得很好。谢谢！

@Batsheva 因为MdFormFieldModule 是在2.0.0-beta.10 中引入的，正如我在答案中所述。

感谢您的快速回答！好的，我现在明白了，我以为你说的是​​ 1.0 版，所以 3 就可以了……

嘿@Faisal 感谢您的回复 - 似乎也是我一直在寻找的。虽然使用 2.0.0-beta.10 我得到了错误：node_modules/@angular/material/material"' has no exported member 'MdFormFieldModule'. 感谢您提出的任何想法！

【参考方案2】：

如果您在导入文件时遇到困难，那么您可以只使用一种方法来导入。

首先在你的 .component.ts 中导入所有需要的组件

并在你的模块 .module.ts 中导入特定的模块

然后将其添加到 @NgModule ( imports : [ <Example>Module ] ) 的导入中

您想在 Angular 应用程序中导入表单控件的示例

1)。 app.component.ts

`import  FormGroup, FormControl  from '@angular/forms'`

2)。 app.module.ts

import FormsModule from '@angular/forms'

在app.module.ts下面

@NgModule ( imports : [ FormsModule ] )

【参考方案3】：

你可以像这样使用 md-input-container ：

<md-input-container>
 <input mdInput name="name" [(ngModel)]="yourModel" class="filter-input-field"/>
</md-input-container>