title: Angular 6 reactive forms. FormArray of select
body: <p>I followed <a href="https://angular.io/guide/reactive-forms#use-formarray-to-present-an-array-of-formgroups" rel="nofollow noreferrer">Angular Reative Form guide</a> that explains how to add a FormArray of Adrresses to a FormGroup.</p>
  
  <p>Now I want to have a hero that can have different powers, selecting them from a <code>select</code>, or better from a dynamic array of <code>select</code>.</p>
  
  <p>Passing from the example of Angular Docs to my desired functionality I can't make it to run.</p>
  
  <p>This is my hero-form.ts</p>
  
  <pre class="lang-js prettyprint-override"><code>@Component({
    selector: 'app-hero-form',
    templateUrl: './hero-form.component.html',
    styleUrls: ['./hero-form.component.css']
  })
  export class HeroFormComponent implements OnInit, OnChanges {
  
    heroForm: FormGroup;
    nameChangeLog: string[] = [];
    hero: Hero = new Hero();
    allPowers: Power[] = [];
  
    constructor(private fb: FormBuilder, private powerService: PowerService) {
      this.createForm();
      this.logNameChange();
    }
  
    ngOnInit() {
      this.powerService.getAll().subscribe(powers =&gt; this.allPowers = powers);
    }
  
    createForm() {
      this.heroForm = this.fb.group({
        name: ['', Validators.required],
        powers: this.fb.array([]),
      });
    }
  
    ngOnChanges() {
      this.rebuildForm();
    }
  
    rebuildForm() {
      this.heroForm.reset({
        name: this.hero.name
      });
      this.setPowersControl(this.hero.powers);
    }
  
    setPowersControl(powers: Power[]) {
      const powersFGs = powers.map(pow =&gt; this.fb.group(pow));
      const powersFormArray = this.fb.array(powersFGs);
      this.heroForm.setControl('powers', powersFormArray);
    }
  
  
    get powers(): FormArray {
      const pows = this.heroForm.get('powers') as FormArray;
      return pows;
    }
  
  
    addPowerChoice() {
      this.powers.push(this.fb.control(new Power()));
      // this.powers.push(this.fb.group(new Power(), Validators.required));
    }
  
    onSubmit() {
      this.hero = this.prepareSaveHero();
      console.log('SAVING HERO', this.hero);
      // this.heroService.updateHero(this.hero).subscribe(/* error handling */);
      this.rebuildForm();
    }
  
    prepareSaveHero(): Hero {
      const formModel = this.heroForm.value;
  
      // deep copy of form model lairs
      const powersDeepCopy: Power[] = formModel.powers.map(
        (pow: Power) =&gt; Object.assign({}, pow)
      );
  
      // return new `Hero` object containing a combination of original hero value(s)
      // and deep copies of changed form model values
      const saveHero: Hero = {
        id: this.hero.id,
        name: formModel.name as string,
        // addresses: formModel.secretLairs // &lt;-- bad!
        powers: powersDeepCopy
      };
      return saveHero;
    }
  
    revert() { this.rebuildForm(); }
  
    logNameChange() {
      const nameControl = this.heroForm.get('name');
      nameControl.valueChanges.forEach(
        (value: string) =&gt; this.nameChangeLog.push(value)
      );
    }
  
  }
  </code></pre>
  
  <p>This is my hero-form.html</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;form [formGroup]="heroForm" (ngSubmit)="onSubmit()"&gt;
      &lt;div style="margin-bottom: 1em"&gt;
          &lt;button type="submit" [disabled]="heroForm.pristine" class="btn btn-success"&gt;Save
          &lt;/button&gt; &amp;nbsp;
          &lt;button type="button" (click)="revert()" [disabled]="heroForm.pristine" class="btn btn-danger"&gt;Revert&lt;/button&gt;
      &lt;/div&gt;
  
      &lt;!-- Hero Detail Controls --&gt;
      &lt;div class="form-group"&gt;
          &lt;label class="center-block"&gt;Name:
              &lt;input class="form-control" formControlName="name"&gt;
          &lt;/label&gt;
      &lt;/div&gt;
  
      &lt;div formArrayName="powers" class="well well-lg"&gt;
          &lt;div *ngFor="let pow of powers.controls; let i=index" [formControlName]="i"&gt;
              &lt;!-- The repeated power template --&gt;
              &lt;h4&gt;Potere #{{i + 1}}&lt;/h4&gt;
              &lt;div style="margin-left: 1em;"&gt;
  
                  &lt;div class="form-group"&gt;
                      &lt;label class="center-block"&gt;Power:
                          &lt;select class="form-control"&gt;
                              &lt;option *ngFor="let pow of allPowers" [value]="pow"&gt;{{pow.name}}&lt;/option&gt;
                          &lt;/select&gt;
                      &lt;/label&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;
              &lt;br&gt;
              &lt;!-- End of the repeated address template --&gt;
          &lt;/div&gt;
          &lt;button (click)="addPowerChoice()" type="button"&gt;Add a Power&lt;/button&gt;
      &lt;/div&gt;
  
  &lt;/form&gt;
  
  &lt;p&gt;heroForm value: {{ heroForm.value | json}}&lt;/p&gt;
  
  &lt;h4&gt;Name change log&lt;/h4&gt;
  &lt;div *ngFor="let name of nameChangeLog"&gt;{{name}}&lt;/div&gt;
  </code></pre>
  
  <p>This is power-service that is only returning stubbed data</p>
  
  <pre class="lang-js prettyprint-override"><code>@Injectable({
    providedIn: 'root'
  })
  export class PowerService {
  
    constructor() {
    }
  
    getAll(): Observable&lt;Power[]&gt; {
      return of(this.getProds());
    }
  
    getProds(): Power[] {
      const powers = [];
      for (let i = 0; i &lt; 10; i++) {
        const pow = new Power();
        pow.id = i+'';
        pow.name = 'Power ' + i;
        powers.push(pow);
      }
      return powers;
    }
  }
  </code></pre>
  
  <p>And these are my data models</p>
  
  <pre class="lang-js prettyprint-override"><code>export class Hero {
    id: number;
    name: string;
    powers: Power[];
  }
  
  export class Power {
    id: string = '';
    name: string = '';
  }
  </code></pre>
  
  <p>Here I have make a <a href="https://stackblitz.com/edit/angular-6mj3dr" rel="nofollow noreferrer">stackblitz example</a> but it's not working</p>