title: angular material 2 custom component using mat-auto-complete
body: <p>I have multiple forms where users have to specify their country through an auto-complete.</p>
  
  <p>I implemented a service performing the auto-completion (contact backend, handle responses and return suggestions)</p>
  
  <p>Now I want to create a component to reuse throughout all the forms.</p>
  
  <p>This component would depend on:</p>
  
  <ul>
  <li>the service I mentioned </li>
  <li>a <code>matInput field</code></li>
  <li>a <code>mat-auto-complete</code>.</li>
  </ul>
  
  <p><strong>The component would implement <code>ControlValueAccessor</code> and <code>MatFormFieldControl</code></strong></p>
  
  <p>Parent components would use it like this</p>
  
  <pre><code>&lt;mat-form-field&gt;
    &lt;auto-completed-country formControlName="country"&gt;&lt;/auto-completed-country&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>The parent component creates the <code>FormControl</code> named <code>country</code> and specifies its validators (in some forms the country is required, while in others is not).</p>
  
  <p><strong>Question</strong></p>
  
  <p>Usually <code>matInput</code> is bound to a <code>FormControl</code>, and with an auto-complete through the <code>[matAutocomplete]</code> directive.</p>
  
  <p>However in my scenario this would not be the case, as <code>matInput</code> is not bound to the <code>FormControl</code>, which I think it should be ok, as it seems that one can have a <code>matInput</code> not bound to any <code>FormControl</code>.</p>
  
  <p>However I am worried about the <code>[matAutocomplete]</code> directive, which I figured reading the source that it interacts with <code>matInput</code> and its associated <code>FormControl</code>.</p>
  
  <p><strong>How should I approach this?</strong> </p>
  
  <p><strong>Am I making things more complicated than necessary?</strong></p>