title: Angular4 - No value accessor for form control
body: <p>I have a custom element :</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div formControlName="surveyType"&gt;
    &lt;div *ngFor="let type of surveyTypes"
         (click)="onSelectType(type)"
         [class.selected]="type === selectedType"&gt;
      &lt;md-icon&gt;{{ type.icon }}&lt;/md-icon&gt;
      &lt;span&gt;{{ type.description }}&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When I try to add the formControlName, I get an error message:</p>
  
  <blockquote>
    <p>ERROR Error: No value accessor for form control with name:
    'surveyType'</p>
  </blockquote>
  
  <p>I tried to add <code>ngDefaultControl</code> without success.
  It seems it's because there is no input/select... and I dont know what to do.</p>
  
  <p>I would like to bind my click to this formControl in order that when someone clicks on the entire card that would push my 'type' into the formControl. Is it possible?</p>