use formControl in angular code : <p>I'm not able to use formControl in my mat-select.</p>

<p>I'll remove all innecessary data from files.</p>

<p>this is my package.json</p>

<pre><code>"dependencies": {
  "@angular/cdk": "5.0.4",
  "@angular/common": "~5.2.0",
  "@angular/compiler": "~5.2.0",
  "@angular/core": "~5.2.0",
  "@angular/flex-layout": "2.0.0-beta.12",
  "@angular/forms": "~5.2.0",
  "@angular/material": "5.0.4"
}
</code></pre>

<p>The folder structure:</p>

<pre><code>-src
  -app
    -myComponent
      -myComponent.component.html
      -myComponent.component.ts
      -myCompnent.module.ts
    -shared
      -material
         -material.module.ts
      -shared.module.ts
</code></pre>

<p>material.module.ts:</p>

<pre><code>import { FormsModule } from '@angular/forms';
import { MatSelectModule } from '@angular/material';


@NgModule({
 providers: [],
 imports: [
    FormsModule
 ],
 exports: [
   MatSelectModule
 ]
})
 export class CustomMaterialModule {
}
</code></pre>

<p>shared.module.ts</p>

<pre><code>import { CustomMaterialModule } from './material/material.module';

@NgModule({
  exports: [
    CustomMaterialModule
  ],
  declarations: []
})

export class SharedModule {
}
</code></pre>

<p>and in myComponent.module  </p>

<pre><code>import { SharedModule } from "../shared/shared.module";

@NgModule({
  imports: [
    SharedModule,
  ],
  declarations: [myComponent],
  exports: [myComponent]
 })
export class myComponentModule { }
</code></pre>

<p>Now my component.html and ts from <a href="https://material.angular.io/components/select/overview" rel="nofollow noreferrer">https://material.angular.io/components/select/overview</a>:</p>

<pre><code> export class myComponent {
 toppings = new FormControl();

 toppingList = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];


&lt;mat-form-field&gt;
   &lt;mat-select placeholder="Toppings" [formControl]="toppings" multiple&gt;
     &lt;mat-select-trigger&gt;
          {{toppings.value ? toppings.value[0] : ''}}
          &lt;span *ngIf="toppings.value?.length &gt; 1" class="example-additional-selection"&gt;
            (+{{toppings.value.length - 1}} others)
          &lt;/span&gt;
      &lt;/mat-select-trigger&gt;
     &lt;mat-option *ngFor="let topping of toppingList" [value]="topping"&gt;{{topping}}&lt;/mat-option&gt;
      &lt;/mat-select&gt;
 &lt;/mat-form-field&gt;
</code></pre>

<p>I have this error when executing:</p>

<pre><code>Can't bind to 'formControl' since it isn't a known property of 'mat-select'.
1. If 'mat-select' is an Angular component and it has 'formControl' input, then verify that it is part of this module.
2. If 'mat-select' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
</code></pre>

<p>What are I'm missing?</p>
