title: Can't bind to 'control' since it isn't a known property of (myComponent)
body: <p>this is my app.module.ts</p>
  
  <pre><code>import { NgModule }      from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { HttpModule }    from '@angular/http';
  import { AppComponent }  from './app.component';
  // import { CountryDetailsComponent} from './country-detail.component';
  // import { LandingPageComponent} from './landing-page.component';
  import { routing } from './app.routing'
  import { TypeaheadModule } from 'ng2-bootstrap/components/typeahead';
  import { FormsModule, ReactiveFormsModule } from '@angular/forms';
  import { TabsModule } from 'ng2-bootstrap/ng2-bootstrap';
  import { CollapseModule } from 'ng2-bootstrap/ng2-bootstrap';
  import { AlertModule } from 'ng2-bootstrap/ng2-bootstrap';
  
  
  @NgModule({
      imports:      [ BrowserModule, HttpModule, routing, FormsModule, ReactiveFormsModule, TypeaheadModule, TabsModule, CollapseModule, AlertModule],
      declarations: [ AppComponent ],
      providers: [],
      bootstrap:    [ AppComponent ]
  })
  export class AppModule { }
  </code></pre>
  
  <p>I have this angular2 components:</p>
  
  <p>import {ErrorMessagesComponent} from '../error-messages.component';
  import {ValidationComponent} from '../validation.component';
  import {GasType} from "../gas-type";</p>
  
  <pre><code>export class CountryDetailsComponent extends LoadingPage implements OnInit {
    countryName: string;
    productionForm: FormGroup;
  
  ..
  }
  </code></pre>
  
  <p>and</p>
  
  <pre><code>import { Component, Input } from '@angular/core';
  import { FormGroup, FormControl } from '@angular/forms';
  import { ValidationComponent } from './validation.component';
  
  @Component({
    selector: 'error-messages',
    template: `&lt;div style="color:#E82C0C; margin: 6px 0;" *ngIf="errorMessage !== null"&gt;{{errorMessage}}&lt;/div&gt;`
  })
  export class ErrorMessagesComponent {
    @Input() control: FormControl;
    constructor() { }
  </code></pre>
  
  <p>and template <code>country-details.component.html</code>:</p>
  
  <pre><code>              &lt;div class="col-lg-10 "&gt;
                  &lt;input class="price-format form-control" type="text"
                         [formControl]="productionForm.controls.priceFormat"
                         [(ngModel)]="productionConfig.priceFormat"
                         id="inputPriceFormat"
                         name="priceFormat"&gt;
                  &lt;error-messages [control]="productionForm.controls.priceFormat"&gt;&lt;/error-messages&gt;
                &lt;/div&gt;
  </code></pre>
  
  <p>but i get this error:</p>
  
  <pre><code>Can't bind to 'control' since it isn't a known property of 'error-messages'.
  1. If 'error-messages' is an Angular component and it has 'control' input, then verify that it is part of this module.
  2. If 'error-messages' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message.
   ("nputPriceFormat"
                             name="priceFormat"&gt;
                      &lt;error-messages [ERROR -&gt;][control]="productionForm.controls.priceFormat"&gt;&lt;/error-messages&gt;
                    &lt;/div&gt;
            "): b@43:36
  </code></pre>
  
  <p>how should i fix this?</p>