title: No value accessor for form control with name: ''
body: <blockquote>
    <p>ERROR Error: No value accessor for form control with name: 'sNo'</p>
  </blockquote>
  
  <p>it is not finding formCOntrolName in my DOM</p>
  
  <p>component side</p>
  
  <pre><code>this.form = new FormGroup({
   'sNo': new FormControl,
   'question': new FormControl,
   'options': new FormGroup({
     'op': new FormControl,
    })
      });
  </code></pre>
  
  <p>HTML side</p>
  
  <pre><code>&lt;form [formGroup]="form"&gt;
        &lt;div *ngFor="let data of currentQuestionsValue"&gt;
          &lt;div *ngFor="let d of data.items "&gt;
            &lt;strong formControlName="sNo"&gt; {{ d.sno }}). &lt;/strong&gt;
            &lt;span formControlName="question"&gt;{{ d.question}}&lt;/span&gt;
            &lt;div&gt;
              &lt;form formGroupName="options"&gt;
                &lt;label *ngFor="let key of objectKeys(d.options)" formControlName="op"&gt;
                  &lt;input type="radio" name="option" [value]="d.options[key]"&gt;
                  &lt;span&gt;{{ d.options[key] }}&lt;/span&gt;
                &lt;/label&gt;
              &lt;/form&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/form&gt;
  </code></pre>