模板解析错误:"md-form-field"不是已知元素 [英] Template parse errors: 'md-form-field' is not a known element

问题描述

我正在使用Angular 4和Angular Material2.对于以下代码:

I am using Angular 4 and Angular Material 2. For the following code :

<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" 禁止显示此消息. ("[错误->]

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 ->]

您能在我想念的地方帮我吗?

Could you please help me where I am missing?

以下是我的 app.module.ts 代码，在该代码中我已导入材料模块:

Following is my app.module.ts code where I have imported material modules:

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

推荐答案

更新:

自 2.0.0-beta.12 起，已删除 md 前缀，而使用 mat 前缀.参见 CHANGELOG 了解详情:

Since 2.0.0-beta.12, md prefix has been removed in favor of mat prefix. See this CHANGELOG for details:

所有"md"前缀均已删除.请参见 弃用通知 beta.11注释以获取更多信息.

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 :

After the update, <md-form-field> should be changed to <mat-form-field>. Also, MdFormFieldModule and MdInputModule should be changed to MatFormFieldModule and MatInputModule:

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

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

这里是 使用 2.0.0-beta.12 更新了StackBlitz 演示.

Here is a link to Updated StackBlitz demo using 2.0.0-beta.12.

原始:

<md-form-field> 在

<md-form-field> was introduced in 2.0.0-beta.10. See below from the changelog documentation:

md-input-container 重命名为 md-form-field (虽然仍在 向后兼容).旧的选择器将在后续版本中删除.

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

这里是一个链接，用于完成 CHANGELOG .

Here is a link to complete CHANGELOG.

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

To use <md-form-field> selector, make sure that you have version 2.0.0-beta.10 of material installed. Moreover, you need to import MdFormFieldModule module in you AppModule imports:

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

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

对于任何偶然发现此问题的人，这里是指向> 工作演示的链接 在StackBlitz上.

For anyone who stumbles upon this question, here is a link to working demo on StackBlitz.

这篇关于模板解析错误:"md-form-field"不是已知元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！