title: Using FormcontrolName with label in angular 6
body: <p>I have angular 6 project with reactive forms. I have a grid like below. <code>Detail</code> button, open a modal window and showing student infos. My html of dialog is like below. But it gave me <code>No value accessor for form control with name: studentNumber</code> error. Is my html logic is wrong?</p>
  
  <p>This not working</p>
  
  <pre><code>&lt;form [formGroup]="studentForm"&gt;
    &lt;p-dialog header="Student Detail" [(visible)]="displayStudentForm"&gt;
      &lt;div class="p-grid"&gt;
          &lt;label&gt;Student Number&lt;/label&gt;
          &lt;label formControlName="studentNumber"&gt;&lt;/label&gt;
      &lt;/div&gt;
      &lt;div class="p-grid"&gt;
          &lt;label&gt;Student Age&lt;/label&gt;
          &lt;label formControlName="studentAge"&gt;&lt;/label&gt;
      &lt;/div&gt;
      &lt;div class="p-grid"&gt;
          &lt;label&gt;Student Type&lt;/label&gt;
          &lt;label formControlName="studentType"&gt;&lt;/label&gt;
      &lt;/div&gt;
    &lt;/p-dialog&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>When I tried like below, working perfectly. But, this is very long for writing everywhere.   </p>
  
  <pre><code>&lt;label&gt;{{studentForm.controls.studentNumber.value}}&lt;/label&gt;
  </code></pre>
  
  <p>When I tried like below, working perfectly</p>
  
  <pre><code>&lt;input formControlName="studentNumber"&gt; 
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/r8dbp.png" rel="noreferrer"><img src="https://i.stack.imgur.com/r8dbp.png" alt="My grid"></a></p>