Template analysis errors: "md-form-field" is not a known element

Question

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> 

I get an error message:

Template analysis errors: 'md-form-field' is not a known element : 1. If "md-form-field" is an Angular component, then make sure that it is part of this module. 2. If "md-form-field" is a web component, add "CUSTOM_ELEMENTS_SCHEMA" to the "@ NgModule.schemas" of this component to suppress this message. ("[ERROR →]

Could you help me where I am missing?

Below is my app.module.ts code, where I imported the 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 { } 

Answer 1

UPDATE:

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

All "md" prefixes are removed. See the beta.11 disclaimer notice for more information.

After updating, <md-form-field> should be changed to <mat-form-field> . In addition, MdFormFieldModule and MdInputModule should be renamed to MatFormFieldModule and MatInputModule :

 import { MatFormFieldModule } from '@angular/material'; import { MatInputModule } from '@angular/material'; @NgModule({ imports: [ .... MatFormFieldModule, MatInputModule, .... ] 

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

---

ORIGINAL:

<md-form-field> was introduced in 2.0.0-beta.10 . See the documentation below for a change:

md-input-container is renamed to md-form-field (still backward compatible). The old selector will be removed in the next version.

Here is the link to complete CHANGELOG .

To use the <md-form-field> selector, make sure you have version 2.0.0-beta.10 installed. In addition, you need to import the MdFormFieldModule module into the AppModule import:

 import { MdFormFieldModule } from '@angular/material'; import { MdInputModule } from '@angular/material'; @NgModule({ imports: [ .... MdFormFieldModule, MdInputModule, .... ] 

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

Answer 2

You can use md-input-container as follows:

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

Answer 3

If you find it difficult to import files, you can import only one methodology.

First import all the necessary components into your .component.ts

And import the specific module into your module .module.ts

And then add it to the import in @NgModule ({ imports : [ <Example>Module ] })

An example that you want to import formcontrols only in your angular application

1). app.component.ts

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

2). app.module.ts

import { FormsModule } from '@angular/forms'

below in app.module.ts in

@NgModule ({ imports : [ FormsModule ] })