md-form-field is not a known element Angular Material

1
votes

Error

Uncaught 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. ("

i have implemented angular input with angular material

url https://material.angular.io/components/input/overview

html

       <form class="example-form">
      <md-form-field class="example-full-width">
     <input mdInput placeholder="Favorite food" value="Sushi">
    </md-form-field>
    </form>

after googling i found link

Angular Material2 : 'md-form-field' is not a known element

which says

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

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

app.module.ts after importing

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

    ERROR in D:/frontend/src/app/app.module.ts (97,10): Module '"D:/frontendapp/node_modules/@angular/material/material"' has no exported member 'MdFormFieldModule'.
  • can anyone suggest what im missing.
3
javascriptangularangular-material
Make sure your @angular/material version is 2.0.0-beta.10 and there is no MdFormFieldModule, just import MdInputModule and add it to imports array. - Pengyy
@Pengyy MdFormFieldModule was introduced in beta.10 and it has to be imported in module imports along with MdInputModule - Faisal

3 Answers

1
votes

Import this module : MdInputModule Then use this code snip and enjoy :

<md-input-container>
   <input mdInput placeholder="User">
</md-input-container>
0
votes

Add schemas: [CUSTOM_ELEMENTS_SCHEMA] and import {MdInputModule} from '@angular/material' instead of MdFormFieldModule it's outdated.

@NgModule({
    declarations: [
        ..
    ],
    imports: [
        MdInputModule,
        ..
    ],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

To your module

0
votes

If you're getting that error in a more recent version of Angular, I found that AngularMaterial indicates it has changed the component tag (whatever you want to call it) from md-form-field to mat-form-field in recent versions. Notice the mat in mat-form-field. I was updating from version 2.0.0-beta.3 to version 5.2.5. This breaking change appears to have come in 2.0.0-beta.12.

While I needed to import import { MatInputModule } from '@angular/material'; in my app.module.ts file, it was the component tag changes in the .html file that alleviated the console error 'md-form-field' is not a known element:.

Note: I came across this when upgrading my md-input-container tags to md-form-field tags, and it took me a lot of searching to realize that those have since been updated AGAIN to the new mat-form-field. Anyway, if you're updating from an old version of Material using md-input-container OR md-form-field to a newer version of Material, I would recommend you just update all the way to mat-form-field if you can.

Note2: Make sure to look out for any tangential updates - like changing directive names. For example, if you have any cases of mdInput, you'll likely need to change them to matInput. Stuff like that. Those md to mat changes may be prolific through your code. If your editor has a "replace-all" across multiple files functionality, it will be your best friend. At least md is not a common pair of letters, besides in the old AngularMaterial world.