Select array to save

Question

Making an array of selects using multi-select, but select them is not communicating, when I select one appears in the json, but when I go to select another subscribes those I selected. I’m using Angular 4.

Follow the link below to test the function.

Staackblitz: https://stackblitz.com/edit/angular-tjgycw?file=src/app/app.component.html

JSON

Component

colecaoGrupoPermissoes: ColecaoGrupoPermissao[];
this.perfilAcessoService.findAllPermissoes()
    .subscribe(colecaoGrupoPermissoes => {
        console.log(colecaoGrupoPermissoes)
        this.colecaoGrupoPermissoes = colecaoGrupoPermissoes;
    })

this.perfilAcessoForm = this.builder.group({
    id: [],
    nome: ['', [Validators.required, Validators.maxLength(120)]],
    tipoPerfil: ['', [Validators.required]],
    unidade: this.builder.group({
        id: ['', [Validators.required]]
    }),
    descricao: ['', [Validators.required, Validators.maxLength(80)]],
    permissoes: ([{}]),
}, {});

Html

   <div id="collapse{{i}}" class="accordion-body collapse" aria-expanded="false" style="">
   <div class="panel-body">
      <!-- BUTTON ADD FORMAÇÃO -->
      <div class="row">
         <div *ngFor="let grupoPermissao of colecaoGrupoPermissao.grupoPermissoes">
            <div class="col-md-6">
               <p>{{grupoPermissao.nome | translate}}</p>
            </div>
            <div class="col-md-6">
               <input-container fieldErrorCode="{{extractErrorCode('permissao')}}" fieldName="permissao">
                  <select class="form-control" formControlName="permissoes" [compareWith]="compareFn" multiple> 
                  <option *ngFor="let permissao of grupoPermissao.permissoes" [ngValue]="permissao">{{permissao.nome}}</option>
                  </select>
               </input-container>
            </div>
         </div>
      </div>
   </div>
</div>

Answer 1

Posting response from stackblitz

app.modulets.

import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
  @NgModule({
    declarations:[
      AppComponent,
      HelloComponent
    ],
    imports: [
      BrowserModule,
      CommonModule,
      ReactiveFormsModule,
      FormsModule,
    ],
    exports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule
  ],
    bootstrap:[ AppComponent ],

  })
  export class AppModule {}

app.componentts.

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit  {
  name = 'Angular';
  acessoForm: FormGroup;
  listaPermissoes: any[];

  constructor(
      private builder: FormBuilder,
  ){

  }

  ngOnInit(){

    this.listaPermissoes = [
    {
      "id": 2,
      "nome": "grupo.perm.cadeira",
      "permissoes": [
        {
          "id": 6,
          "nome": "perm.cadastrarCadeira"
        },
        {
          "id": 7,
          "nome": "perm.alterarCadeira"
        },
      ]
    },
    {
      "id": 4,
      "nome": "grupo.perm.mesa",
      "permissoes": [
        {
          "id": 15,
          "nome": "perm.cadastrarMesa"
        },
        {
          "id": 16,
          "nome": "perm.alterarMesa"
        },
      ]
    }]

     this.acessoForm = this.builder.group(
      this.listaPermissoes.map((item, index) => `permissoes-${index}`)
        .reduce((pre, curr) => { 
          pre[curr] = [[]]; 
          return pre; }, {}), {});
  }

  selectedPermissoes(){
    return [].concat(...Object.values(this.acessoForm.value));
  }

  test(){
    console.log(this.selectedPermissoes())
  }

  }

app.component.html

<form [formGroup]="acessoForm">
    <div *ngFor="let listaPermissao of listaPermissoes; let i = index">
        <div class="col-md-6">
            <p>{{listaPermissao.nome}}</p>
        </div>

        <div class="col-md-6">

            <select class="form-control" [formControlName]="'permissoes-'+i" multiple>
                                      <option *ngFor="let permissao of listaPermissao.permissoes" [ngValue]="permissao">{{permissao.nome}}</option>
                                    </select>
        </div>
    </div>
</form>
<pre (click)="test()">{{acessoForm.value | json}}</pre>