title: Angular Reactive Forms: Dynamic Select dropdown value not binding
body: <p>I have two arrays of data: AssociatedPrincipals (previously saved data) and ReferencePrincipals (static data to populate in dropdown controls).  I'm struggling to get the previous value from AssociatedPrincipals to be displayed/selected in a <em>dynamic amount</em> (most examples use a single dropdown) of dropdowns on page load.</p>
  
  <p>I'm not certain how to set up the form (code behind and HTML), especially setting the Select's formControlName.  Currently, the static values in each dropdown populate, but I cannot get the <em>selected value</em> to bind properly.</p>
  
  <pre><code>public ngOnInit() {
      this.factsForm = this.formbuilder.group({
          associatedPrincipals: this.formbuilder.array([]),
          referencePrincipals: this.formbuilder.array([])
      });
  
      // Data for both of these methods comes from external source...
      var responseData = // HTTP source...
      // Push retrieved data into form
      this.initPrincipals(responseData[0]);
      // Push static data into form
     this.initStaticData(responseData[1]);
  }
  
  public initPrincipals(principals?: IAssociatedPrincipal[]): FormArray {
      principals.forEach((principal) =&gt; {
   this.associatedPrincipals.push(this.createPrincipalFormGroup(principal));
      });
  }
  
  public initStaticData(response: IReferencePrincipal[]) {
     response.forEach((principal) =&gt; {
        this.referencePrincipals.push(
             this.formbuilder.control({
                  code: principal.code,
                  canHaveLead: principal.canHaveLead,
                  isDuplicate: false
                }));
          });
  }
  
  public createPrincipalFormGroup(principal: IAssociatedPrincipal) {
          return this.formbuilder.group({
              code: principal.code,
              canHaveLead: false,
              isDuplicate: false
          });
      }
  
  public get associatedPrincipals(): FormArray {
          return this.factsForm.get('associatedPrincipals') as FormArray;
      }
  
      public get referencePrincipals(): FormArray {
          return this.factsForm.get("referencePrincipals") as FormArray;
      }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code> &lt;form novalidate [formGroup]="factsForm"&gt;
          &lt;div formArrayName="associatedPrincipals"&gt;
               &lt;div *ngFor="let associatedPrincipal of associatedPrincipals.controls; let i=index;" [formGroupName]="i" &gt;
                  &lt;select class="form-control create-input"
                          formControlName="i"&gt;
                       &lt;option value=null disabled selected hidden&gt;--Select--&lt;/option&gt;
                         &lt;option *ngFor="let refPrincipal of referencePrincipals.controls" [ngValue]="refPrincipal"&gt;refPrincipal.value.code&lt;/option&gt;
                   &lt;/select&gt;
               &lt;/div&gt;
           &lt;/div&gt;
      &lt;/form&gt;
  </code></pre>
  
  <p>I appreciate any feedback!</p>
  
  <p><strong>EDIT: Added Plunker showing the issue:</strong> <a href="https://embed.plnkr.co/XMLvFUbuc32EStLylDGO/" rel="noreferrer">https://embed.plnkr.co/XMLvFUbuc32EStLylDGO/</a></p>