模板解析錯誤：「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 ] })