Angular: Connect multiple fields to a reactive form

Question

The problem is that I have several select Multiple and when I select some options from a select they are added to Reactiveform correctly, but when I select some option from another select they are about writing, I need them not to overwrite. They are automatically generated.

this.form = this.builder.group({
  id: [],
  permissoes: ([{}]),
}, {});

<div class="col-md-6">                                 
    <select class="form-control" formControlName="permissoes" [compareWith]="compareFn" multiple>
        <option *ngFor="let permissao of permissoes" [ngValue]="permissao">{{permissao.nome}}</option>
    </select>
</div>

All selects are equal, it is possible to join all selects in this permissions array ?

Answer 1

For each select or input you have you have to add a corresponding row when creating your form. And through the formControlName field you map each select/input for your respective control.

this.form = this.builder.group({
  id: [],
  permissoes: ([{}]),
  outroSelect: ([{}]),
});

<div class="col-md-6">                                 
    <select class="form-control" formControlName="permissoes" [compareWith]="compareFn" multiple>
        <option *ngFor="let permissao of permissoes" [ngValue]="permissao">{{permissao.nome}}</option>
    </select>
</div>

 <div class="col-md-6">                                 
        <select class="form-control" formControlName="outroSelect" [compareWith]="compareFn" multiple>
            <option *ngFor="let outraCoisa of outroSelect" [ngValue]="outraCoisa ">{{outraCoisa .nome}}</option>
        </select>
  </div>