title: Angular Material: mat-form-field must contain a MatFormFieldControl when creating a custom form field control
body: <p>I'd like to implement an Angular Material custom form field following this guide:
  <a href="https://material.angular.io/guide/creating-a-custom-form-field-control" rel="nofollow noreferrer">https://material.angular.io/guide/creating-a-custom-form-field-control</a></p>
  <p>But I keep having this error: ERROR Error: mat-form-field must contain a MatFormFieldControl.</p>
  <p>According to the <a href="https://material.angular.io/components/form-field/overview#error-mat-form-field-must-contain-a-matformfieldcontrol" rel="nofollow noreferrer">documentation</a>:</p>
  <blockquote>
  <p>This error occurs when you have not added a form field control to your form field. If your form field contains a native  or  element, make sure you've added the matInput directive to it and have imported MatInputModule. Other components that can act as a form field control include , , and any custom form field controls you've created.</p>
  </blockquote>
  <p>But adding a matInput directive to the  tags does not change anything. It's like it's blind because the  tags are embedded in this new component <code>&lt;example-tel-input&gt;</code></p>
  <p>The mat-form-field:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;mat-form-field&gt;
    &lt;example-tel-input placeholder=&quot;Phone number&quot; required&gt;&lt;/example-tel-input&gt;
    &lt;mat-icon matSuffix&gt;phone&lt;/mat-icon&gt;
    &lt;mat-hint&gt;Include area code&lt;/mat-hint&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  <p>The component with the inputs:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div [formGroup]=&quot;parts&quot; class=&quot;example-tel-input-container&quot;&gt;
    &lt;input class=&quot;example-tel-input-element&quot; formControlName=&quot;area&quot; size=&quot;3&quot; aria-label=&quot;Area code&quot; (input)=&quot;_handleInput()&quot;&gt;
    &lt;span class=&quot;example-tel-input-spacer&quot;&gt;&amp;ndash;&lt;/span&gt;
    &lt;input class=&quot;example-tel-input-element&quot; formControlName=&quot;exchange&quot; size=&quot;3&quot; aria-label=&quot;Exchange code&quot; (input)=&quot;_handleInput()&quot;&gt;
    &lt;span class=&quot;example-tel-input-spacer&quot;&gt;&amp;ndash;&lt;/span&gt;
    &lt;input class=&quot;example-tel-input-element&quot; formControlName=&quot;subscriber&quot; size=&quot;4&quot; aria-label=&quot;Subscriber number&quot; (input)=&quot;_handleInput()&quot;&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Stackblitz: <a href="https://stackblitz.com/edit/angular-9fyeha" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-9fyeha</a></p>
  <p>What am I missing?</p>