I encountered a common error while trying to upgrade an app from angular2 to the stable version. Unfortunately, none of the suggested solutions worked for me, even though there seems to be only one widespread solution available. Here's the error message:
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 attempted to import the FormsModule based on this solution1 and this solution2 (which essentially provide the same solution), but the error persists. Is there another workaround available?
Here is the relevant HTML code snippet:
<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 corresponding 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 assistance would be greatly appreciated.