title: Angular forms - How to bind formControlName for select in formArrayName to use objects
body: <p>I'm trying to figure out how to set up a binding object complex binding for <code>select</code> inside formArrayName. I'm guessing that formControlName should have reference to the current item in the array, but I don't know how to access it.</p>
  
  <pre><code>&lt;div formArrayName="users"&gt;
      &lt;div *ngFor="let u of users.controls; let i=index" [formGroupName]='i'&gt;
        user {{i}}: &lt;select formControlName='id'[compareWith]="compareFn"&gt;
          &lt;option *ngFor="let a of avaliableUsers" [ngValue]='a'&gt;{{a.login}}&lt;/option&gt;
        &lt;/select&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>I've created demo with single select (which is working as I want) and array which is pushing value into "id".
  <a href="https://stackblitz.com/edit/angular-d2uaa1" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-d2uaa1</a></p>
  
  <p>Any help is greatly appreciated.</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>Key points:</p>
  
  <ul>
  <li>Bind the whole <code>UsersGroup</code> objects with all properties (id and login)</li>
  <li>Minimum additional code (KISS)</li>
  </ul>
  
  <p><strong>Solution</strong> (Based on @JT_82 comment)</p>
  
  <pre><code>   &lt;div *ngFor="let u of users.controls; let i=index"&gt;
        &lt;select [formControlName]='i' [compareWith]="compareFn"&gt;
          &lt;option *ngFor="let a of avaliableUsers" [ngValue]='a'&gt;{{a.login}}&lt;/option&gt;
        &lt;/select&gt;
      &lt;/div&gt;
  </code></pre>
  
  <pre><code> ngOnInit(): void {
      this.owner.patchValue(this.group.owner);
      this.group.users.forEach(u =&gt; {
        this.users.push(this.fb.control(u))
      });
    }
  
   compareFn(a, b): boolean {
      return a.id === b.id;
    }
  
  </code></pre>