Capture data from all select elements in HTML with Angular

Question

I made a ngFor to list elements select HTML and I’m wanting to capture all the data selected by this select... I did it this way:

app.component.html

<form [formGroup]="secondFormGroup">
    <div *ngFor="let data of getSizeArray(dataHead); let i = index" class="example-box cursor-normal">
        <select formControlName="objetoMapeado">
            <option *ngFor="let d of displayedColumns" [ngValue]="d">
                {{d}}
            </option>
        </select>   
    </div>
</form>

app.componentts.

public secondFormGroup: FormGroup;
public displayedColumns: string[] = 
        ['Nota Fiscal','Fornecedor','Data da Compra','Valor da Compra','Numero de Parcela','Valor da Parcela','Tipo de Recebimento'];

constructor(private _formBuilder: FormBuilder) {}

ngOnInit() {
    this.secondFormGroup = this._formBuilder.group({
        objetoMapeado: ['', Validators.required]
    });
}

The problem that when I make one console.log it only displays the value of the first element and not of all elements select HTML.

console.log(this.secondFormGroup.get('objetoMapeado').value);

Answer 1

In this case you have to use formArray inves from the group

  this.formArray =  new FormArray(
  this.data.map(value=> new FormControl(value)) // os dados que seu array é baseado, é bem ruim chamar uma função no html como vc ta fazendo
 //passar o valor é opicional
);

in html

  <div *ngFor="let data of mappedArray; let i = index" class="example-box cursor-normal">
        <select [control]="formArray[i]">
            <option *ngFor="let d of displayedColumns" [ngValue]="d">
                {{d}}
            </option>
        </select>   
    </div>