Error: mat-form-field must contain a MatFormFieldControl

Describe the bug Receive the error when ng-select is wrapped inside a mat-form-field element

To Reproduce Steps to reproduce the behavior:

1. Create a Reactive Form
2. Wrap ng-select component inside mat-form-field element
3. Check console to see error

Expected behavior ng-select should not break

Code

<mat-grid-tile [colspan]=1 [rowspan]=1>
    <mat-form-field>
    <ng-select matInput placeholder="Select country" #countrySelect [items]="country$" [selectOnTab]="true"
        bindValue="id" labelForId="name" [formControl]="countryFormControl">
    </ng-select>
    </mat-form-field>
</mat-grid-tile>

Additional context The problem seems to be ng-select not having an matInput directive which is shared across mat-form-field chlidren.

Have added the Material Modules: Form, Input, Select https://github.com/angular/material2/issues/7898

[nzbin]

@Dsupreme @kelvinlouis @davdinesh I have made a Material form field wrapper of ng-select (demo), it’s a component of Material extended library. Material Extensions: https://github.com/ng-matero/extensions

[jean-merelis]

@kelvinlouis I have created a directive to support the MatFormFieldControl. SCSS file needs a little more polishing but it works as expected. https://gist.github.com/jean-merelis/44a3ed842c24e99d38cd2f1e9249c473#file-ng-select-directive-ts