Template parse 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 am getting an error:

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?

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

Answer 1

UPDATE:

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

All "md" prefixes have been removed. See the deprecation notice in the beta.11 notes for more information.

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

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

---

ORIGINAL:

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

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

Here is a link to complete CHANGELOG.

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

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

Answer 2

If you are finding difficulties importing files then just you can have one methodology to import.

First import any required components in your .component.ts

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

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

Example you want to import formcontrols just in you 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 ] })

Answer 3

You can use md-input-container like this :

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