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

Question

我正在使用 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>

我收到一个错误：

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. (" [ERROR ->]

你能帮我看看我遗漏的地方吗？

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

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 { }

Answer 1

更新：

由于 2.0.0-beta.12，md 前缀已被删除，取而代之的是 mat前缀。有关详细信息，请参阅此 CHANGELOG：

All "md" prefixes have been removed. See the deprecation notice in the beta.11 notes for more information.

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

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

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

这是一个 link 到 Updated StackBlitz 的演示，使用 2.0.0-beta.12.

原版：

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

md-input-container renamed to md-form-field (while still being backwards compatible). The old selector will be removed in a subsequent release.

这里有一个link来完成CHANGELOG。

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

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

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

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

Answer 2

您可以像这样使用 md-input-container :

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

Answer 3

如果您发现导入文件有困难，那么您可以使用一种方法来导入。

首先在您的 .component.ts

中导入所有必需的组件

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

然后在 @NgModule ({ imports : [ <Example>Module ] })

的 imports 中添加

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

1).应用程序component.ts

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

2).应用程序module.ts

import { FormsModule } from '@angular/forms'

下面在应用中。module.ts在

中

@NgModule ({ imports : [ FormsModule ] })

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

Template parse errors: 'md-form-field' is not a known element

angular-material

angular-material2

angular