4

I've got a common error while upgrading an angular2 app to stable version but none of the mentioned solutions worked for me (which is almost a widespread only one solution). Here is it :

Template parse errors:
Can't bind to 'placeholder' since it isn't a known property of 'md-input'.
1. If 'md-input' is an Angular component and it has 'placeholder' input, then verify that it is part of this module.
2. If 'md-input' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.

I've tried to import the FormsModule according to this solution1 and this solution2 (which are the same) but the same error still occuring. Is there an other solution for it ?

the HTML :

  <div class="col-lg-10 col-lg-offset-1">
      <div class="md-block">
        <md-input
          id="name"
          [ngModel]="xyzStuff?.xyz_name"
          placeholder="{{'xyzName' | translate}}"
          formControlName="name"
          dividerColor="{{getDividerColor(xyzForm.controls.name)}}"
        >
        </md-input>
      </div>
    </div>

and the Module file :

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { UIRouterModule } from 'ui-router-ng2';
import { TranslateModule } from 'ng2-translate';

import { ParComponent } from './par.component';
import { XyzSettingsComponent } from './shared/xyz-settings/xyz-settings.component';

@NgModule({
  declarations: [
    ParComponent,
    XyzSettingsComponent
  ],
  imports:       [
    FormsModule,
    BrowserModule,
    UIRouterModule,
    TranslateModule,
    ReactiveFormsModule
  ],
  providers:     [],
  exports:       [
    FormsModule,
    BrowserModule,
    UIRouterModule,
    TranslateModule,
    ReactiveFormsModule
  ]
})
export class ParModule {}

Any help ?

Community
  • 1
  • 1
SeleM
  • 9,310
  • 5
  • 32
  • 51

1 Answers1

3

md-input is belongs to angular2 material project. Angular 2 Material is entirely different plugin. You have to make sure you import MaterialModule imported and injected inside imports option of NgModule. 

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

@NgModule({
  declarations: [
    ...
  ],
  imports:       [
    ...,
    MaterialModule.forRoot(), //<-- imported material module here
    ...
  ],
  providers:     [],
  exports:       [
    ...
  ]
})

I'd highly recommend you to go through the Getting started page Angular2 material

Note: Make sure you should import MaterialModule in whichever modules component you want to use Angular 2 material components.

Pankaj Parkar
  • 134,766
  • 23
  • 234
  • 299