模板解析错误：“MD-表单字段”不是一个已知元素

Question

我使用角4和角材质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代码，我已经进口材料模块：

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

UPDATE：

由于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, 
    .... 
    ] 

下面是一个使用2.0.0-beta.12到Updated StackBlitz演示的链接。

---

ORIGINAL：

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

这是完成CHANGELOG的链接。

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

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

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

对于任何人谁在这个问题绊倒，这里是working demo一个链接StackBlitz。

Answer 2

可以使用MD-输入容器是这样的：

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

比如你想导入formcontrols只是在你的角度应用

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