Can't bind to 'control' since it isn't a known property of 'error-messages'
<p>I have this angular2 components:</p>

<pre><code>export class CountryDetailsComponent extends LoadingPage implements OnInit {
  countryName: string;
  productionForm: FormGroup;

..
}
</code></pre>

<p>and</p>

<pre><code>@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:</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>