模板解析错误:“md-form-field"不是已知元素 [英] Template parse errors: 'md-form-field' is not a known element
问题描述
我使用的是 Angular 4 和 Angular Material 2.对于以下代码:
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组件,那么在这个组件的'@NgModule.schemas'中添加'CUSTOM_ELEMENTS_SCHEMA'抑制此消息.(" [错误 ->]
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
前缀.请参阅此 更改日志了解详情:
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.
更新后,
应该改为
.另外,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,
....
]
这是<的链接strong>使用 2.0.0-beta.12
更新了 StackBlitz 演示.
原文:
是在 2.0.0-beta.10.请参阅以下更改日志文档:
<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.
要使用
选择器,请确保您安装了 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屋!