title: "No value accessor for form control with path" despite using formBuilder.control
body: <p>I'm trying to procedurally generate an Angular form based on some settings information found in our backend. To do this a request is sent to retrieve the data and then I'm trying to build a reactive form based on that data.</p>
  <p><code>dynamicValue</code> is the current value of a setting, in the case of a toggle switch it'll be either true or false.</p>
  <p>The below code creates a FormGroup, which contains a formArray which then has the value of each setting in the settingsData array pushed to a new control.</p>
  <p>Component:</p>
  <pre><code>    this.form = this.formBuilder.group({
        settingsArray: this.formBuilder.array([])
      });
  
      this.settingsData.forEach((settings: ClientSetting) =&gt; {
        this.settingsArray.push(
          this.formBuilder.control(settings.dynamicValue)
        )
      });
  </code></pre>
  <p>And then in my template I'm doing this</p>
  <pre><code>&lt;div [formGroup]=&quot;form&quot;&gt;
          &lt;div formArrayName=&quot;settingsArray&quot;&gt;
            &lt;div *ngFor=&quot;let settings of settingsArray.controls; let i = index&quot;&gt;
                  &lt;app-boolean-setting [formControlName]=&quot;i&quot; [settingData]=&quot;settingsData[i]&quot;&gt;&lt;/app-boolean-setting&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>App-boolean-setting template</p>
  <pre><code>&lt;div class=&quot;cont&quot;&gt;
      &lt;span&gt;{{settingData.description.label}}&lt;/span&gt;
      &lt;mat-slide-toggle formControlName=&quot;{{formControlName}}&quot; checked=&quot;{{settingData.description}}&quot;&gt;&lt;/mat-slide-toggle&gt;
  &lt;/div&gt;
  </code></pre>
  <p>The app-boolean-setting component just has two inputs:</p>
  <pre><code>@Input() public settingData: ClientSetting;
  @Input() public formControlName: string;
  </code></pre>
  <p>However when I run the code I'm getting two errors:</p>
  <pre><code>Error: No value accessor for form control with path: 'settingsArray -&gt; 0'
  </code></pre>
  <p>and this one, which is an error within the BooleanSetting template as it seems to not be able to find the formGroup even though it's within the div in the parent component which has <code>[formGroup]=&quot;form&quot; </code>declared?</p>
  <pre><code>Error: formControlName must be used with a parent formGroup directive.  You'll want to add a formGroup
         directive and pass it an existing FormGroup instance (you can create one in your class).
  </code></pre>