title: Angular 8 - FormArray "No value accessor for form control with path"
body: <p>I'm using <a href="https://github.com/ng-select/ng-select" rel="nofollow noreferrer">ng-select</a> on a form, but now I want to wrap a specific configuration of this on a custom component. The problem is I'm using a <code>FormArray</code> which contains several of this, in the next way:</p>
  <pre><code>this.profileForm = this.formBuilder.group(
    {
      ...
      linkedRoles: this.formBuilder.array([])
    }
  );
  </code></pre>
  <p>This <code>linkedRoles</code> is populated with the next <code>FormGroup</code>:</p>
  <pre><code>let fgRoles: FormGroup;
  
  for (let i = 0; i &lt; this.userRoles.length; i++) {
    fgRoles = this.formBuilder.group({
      activeRole: [{ value: null }],
      roles: [{ value: null }]
    });
    this.linkedRoles.push(fgRoles);
    this.linkedRoles.controls[i].setValue({
      activeRole: this.userRoles[i].role,
      roles: this.extractUserRoles(this.userRoles[i])
    });
  </code></pre>
  <p>A getter is created for simplicity too:</p>
  <pre><code>get linkedRoles(): FormArray {
    return &lt;FormArray&gt;this.profileForm.get(&quot;linkedRoles&quot;);
  }
  </code></pre>
  <p>After this, in my template, I was using this composition which was working perfectly:</p>
  <pre><code>&lt;form [formGroup]=&quot;profileForm&quot;&gt;
    ...
  
    &lt;table&gt;
      ...
      &lt;tbody&gt;
        &lt;tr formArrayName=&quot;linkedRoles&quot;
          *ngFor=&quot;let usuR of userRoles;
            let idx = index&quot;
        &gt;
          ...
          &lt;td data-label=&quot;Roles&quot; [formGroupName]=&quot;idx&quot;&gt;
            &lt;ng-select #rolesNgSelect
              [hideSelected]=&quot;false&quot;
              bindLabel=&quot;rol&quot;
              ...
              formControlName=&quot;roles&quot;
            &gt;
  
              &lt;ng-template ng-label-tmp let-item=&quot;item&quot;&gt;
                ...
              &lt;/ng-template&gt;
  
              &lt;ng-template ng-option-tmp let-item=&quot;item&quot;&gt;
                ...
              &lt;/ng-template&gt;
  
            &lt;/ng-select&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  
  &lt;/form&gt;
  </code></pre>
  <p>Now, I'm trying to substitute the <code>ng-select</code> by my custom component <code>role-selector</code>, which basically receives all the necessary properties from the <code>ng-select</code> and wraps this in the template. The change in my previous template is as follows:</p>
  <pre><code>&lt;tr formArrayName=&quot;linkedRoles&quot;
    *ngFor=&quot;let usuR of userRoles;
      let idx = index;
      let ctrlRol of linkedRoles.controls&quot;
  &gt;
    &lt;td&gt;
      &lt;app-role-selector
        [hideSelected]=&quot;false&quot;
        bindLabel=&quot;rol&quot;
        ...
        formControlName=&quot;roles&quot;
      &gt;
      &lt;/app-role-selector&gt;
    &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  <p>With this subtle change, I'm receiving the next error in console:</p>
  <pre><code>ERROR Error: No value accessor for form control with path: 'linkedRoles -&gt; 0 -&gt; roles'
  </code></pre>
  <p>Strangest thing is, when I click the unstyled box that appears, it loads and works almost fine. Should I move my <code>formControlName</code> tag to the <code>ng-select</code> inside my component's template?</p>
  <h2><strong>POSSIBLE SOLUTION</strong></h2>
  <p>Looking for a solution, <a href="https://stackoverflow.com/questions/46465891/what-is-ngdefaultcontrol-in-angular/46465959">I found the interesting <code>ngDefaultControl</code></a>. Adding this directive to my custom component makes it behave as expected. Now it looks like this:</p>
  <pre><code>&lt;app-role-selector
    [hideSelected]=&quot;false&quot;
    bindLabel=&quot;rol&quot;
    ...
    ngDefaultControl
    formControlName=&quot;roles&quot;
  &gt;
  </code></pre>
  <p>The only counterside is I don't fully understand why this is necessary and if this is the best solution.</p>