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