title: mat-form-field must contain a MatFormFieldControl
body: <p>We are trying to build our own form-field-Components at our Company. We are trying to wrap material design's Components like this:</p>
  
  <p>field:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;mat-form-field&gt;
      &lt;ng-content&gt;&lt;/ng-content&gt;
      &lt;mat-hint align="start"&gt;&lt;strong&gt;{{hint}}&lt;/strong&gt; &lt;/mat-hint&gt;
      &lt;mat-hint align="end"&gt;{{message.value.length}} / 256&lt;/mat-hint&gt;
      &lt;mat-error&gt;This field is required&lt;/mat-error&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>textbox:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;field hint="hint"&gt;
      &lt;input matInput 
      [placeholder]="placeholder" 
      [value]="value"
      (change)="onChange($event)" 
      (keydown)="onKeydown($event)" 
      (keyup)="onKeyup($event)" 
      (keypress)="onKeypress($event)"&gt;
  &lt;/field&gt;
  </code></pre>
  
  <p>Usage:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;textbox value="test" hint="my hint"&gt;&lt;/textbox&gt;
  </code></pre>
  
  <p>This results in approximately this:</p>
  
  <pre class="lang-html prettyprint-override"><code>    &lt;textbox  placeholder="Personnummer/samordningsnummer" value="" ng-reflect-placeholder="Personnummer/samordningsnummer"&gt;
         &lt;field&gt;
            &lt;mat-form-field class="mat-input-container mat-form-field&gt;
               &lt;div class="mat-input-wrapper mat-form-field-wrapper"&gt;
                  &lt;div class="mat-input-flex mat-form-field-flex"&gt;
                     &lt;div class="mat-input-infix mat-form-field-infix"&gt;
                        &lt;input _ngcontent-c4="" class="mat-input-element mat-form-field-autofill-control" matinput="" ng-reflect-placeholder="Personnummer/samordningsnummer" ng-reflect-value="" id="mat-input-2" placeholder="Personnummer/samordningsnummer" aria-invalid="false"&gt;
                        &lt;span class="mat-input-placeholder-wrapper mat-form-field-placeholder-wrapper"&gt;&lt;/span&gt;
                     &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="mat-input-underline mat-form-field-underline"&gt;
                     &lt;span class="mat-input-ripple mat-form-field-ripple"&gt;&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;div class="mat-input-subscript-wrapper mat-form-field-subscript-wrapper"&gt;&lt;/div&gt;
               &lt;/div&gt;
            &lt;/mat-form-field&gt;
         &lt;/field&gt;
      &lt;/textbox&gt;
  </code></pre>
  
  <p>But I'm getting <i><b>"mat-form-field must contain a MatFormFieldControl"</b></i> in the console. I guess this has to do with mat-form-field not directly containing a matInput-field. But it is containing it, it's just withing the ng-content projection.</p>
  
  <p>Here is a blitz:
  <a href="https://stackblitz.com/edit/angular-xpvwzf" rel="noreferrer">https://stackblitz.com/edit/angular-xpvwzf</a></p>