How to get unique value in FormArray reactive form in Angular?

Question

I have created a stackblitz app to demonstrate my question here: https://angular-ry1vc1.stackblitz.io/

I have formArray values on a select HTML list. Whenever a user changes the selection, it should display the selected value on the page. The problem is how can I display only the current selection and it should NOT overwrite the value selected previously. I wonder how to use the key to make the placeholder of the values unique. TIA

form.html

<form [formGroup]="heroForm" novalidate class="form">
  <section formArrayName="league" class="col-md-12">
    <h3>Heroes</h3>
    <div class="form-inline" *ngFor="let h of heroForm.controls.league.controls; let i = index" [formGroupName]="i">
      <label>Name</label>
      <select (change)="onSelectingHero($event.target.value)">
        <option *ngFor="let hero of heroes" [value]="hero.id" class="form-control">{{hero.name}}</option>
      </select> <hr />
      <div>
        Hero detail: {{selectedHero.name}}
      </div> <hr />
    </div>
    <button (click)="addMoreHeroes()" class="btn btn-sm btn-primary">Add more heroes</button>
  </section>
</form>

component.ts

import { Component, OnInit } from '@angular/core';
import { FormArray, FormBuilder, FormControl, FormGroup, Validators, NgForm } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit  {
  heroes = [];
  heroForm: FormGroup;
  selectedHero;

  constructor(
    private fb: FormBuilder,
  ) {
    this.heroForm = fb.group({
      league: fb.array([
        this.loadHeroes(),
        this.loadHeroes(),
        this.loadHeroes()
      ])
    });
  }

  ngOnInit() {
    this.listHeroes();
  }

  public addMoreHeroes() {
    const control = this.heroForm.get('league') as FormArray;
    control.push(this.loadHeroes());
  }

  public loadHeroes() {
    return this.fb.group(
      {
        id: this.heroes[0],
        name: '',
        level: '',
        skill: '',
      }
    );
  }  

  public listHeroes() {
    this.heroes = [
      {
        id: 1,
        name: 'Superman'
      },
      {
        id: 2,
        name: 'Batman'
      },
      {
        id: 3,
        name: 'Aquaman'
      },
      {
        id: 4,
        name: 'Wonderwoman'
      }      
    ];
  }

  public onSelectingHero(heroId) {
    this.heroes.forEach((hero) => {
      if(hero.id === +heroId) {
        this.selectedHero = hero;
      }
    });
  }
}

Answer 1

If the aim of this is to show only the selected hero by array element instead of replace all the selected values then you can get some help using the array form elements.

A. The onSeletingHero and selectedHero are not necessary, I replaced that using the form value through formControlName attribute, in this example the id control is the select. The h.value.id is the way to get the selected value id.

    <select formControlName="id">
        <option *ngFor="let hero of heroes;" [value]="hero.id" class="form-control">{{hero.name}}</option>
      </select> <hr />
      <div>
        Hero detail: {{getHeroById(h.value.id).name}}
      </div> <hr />
    </div>

B. In order to get the selected hero I added a getHeroById method.

  getHeroById(id: number) {
    return id ? this.heroes.find(x => x.id === +id) : {id: 0, name: ''};
  }

Hope this information solve your question. Cheers