Can I get values from a dynamically created multiple select element?

Question

Can I get values from a dynamically created multiple select element? I have fixed categories of products which I intend to load dynamically from an API. Each one of those categories has an array with the options I want to be able to select. I'm stuck with it, I cant retrieve the selected values, and I recently read something that says that we can't get the selected values from a dynamically created select with angular-material. Is that true?

I've tried getting the elements by id using jQuery and have tried multiple ways of getting the selected values.

On my menu-service, which I didn't show, I print form.values but it is empty'; it should contain the selected options, or the opcEscolhidas array should contain the selected values.

Here is my template:

<div id="main" class="row">
  <h2>Selecione os itens do Cardápio</h2>

  <form (submit)="onCreateMenu(form)" #form="ngForm" id="items-form">
    <ul class="collapsible" data-collapsible="accordion"> 
      <li *ngFor="let categoria of categorias">
        <div class="collapsible-header">{{categoria.nome}}</div>
        <div class="collapsible-body">
          <div class="opGroup">
            <mat-form-field>
              <mat-label>{{categoria.nome}}</mat-label>
              <mat-select ([value])="opcEscolhidas" multiple>
                <mat-option *ngFor="let opcao of categoria.opcoes" [value]="opcao">{{opcao}}</mat-option>
              </mat-select>
            </mat-form-field>                   
          </div>
        </div>
      </li>
    </ul>
    <button type="submit" class="btn">Montar Cardápio</button>
  </form>
</div>

and here is my component:

import { Component, OnInit } from '@angular/core';
// import * as $ from 'jquery';
import { FormControl } from '@angular/forms';
import { MenuService } from '../menu.service';
import { NgForm } from '@angular/forms';



@Component({
  selector: 'app-create-menu',
  templateUrl: './create-menu.component.html',
  styleUrls: ['./create-menu.component.css']
})
export class CreateMenuComponent implements OnInit {
  // feijao = "";
  // arroz = "";
  // macarrao = "";
  // carne = "";
  // acomp = "";
  // salada = "";

  opcEscolhidas = [];

  categorias = [
    {
      "id":1,
      "nome":"Feijão",
      "opcoes": ["Carioca", "Preto", "Verde", "Macassa"]
    },
    {
      "id":2,
      "nome":"Arroz",
      "opcoes": ["Branco", "Refogado", "Integral"]
    },
    {
      "id":3,
      "nome":"Macarrão",
      "opcoes": ["Alho e Óleo", "Molho de tomate", "Manteiga e 
cebola", "Molho branco"]
    },
    {
      "id":4,
      "nome":"Carne",
      "opcoes": ["Bisteca/porco", "Carne de sol", "Peito de 
 frango", "Coxa de frango"]
    },
    {
      "id":5,
      "nome":"Acompanhamentos",
      "opcoes": ["Purê", "Farofa", "Vinagrete", "Batata frita"]
    },
    {
      "id":6,
      "nome":"Salada",
      "opcoes": ["Alface", "Tomate", "Rúcula", "Repolho"]
    }
  ];

  public menuService;

  constructor(menuService: MenuService) { 
    this.menuService = menuService;
  }

  ngOnInit() {
  }

  onCreateMenu(form: NgForm) {
    this.menuService.createMenu(form);
  }

On my menu-service, which I didnt show, I print form.values, but it is empty, and it should contain the selected options. Or my "opcEscolhidas" array should contain the selected values.strong text

Answer 1

Try this

<select
                      class="custom-select"
                      name="overallRating"
                      [ngModel]="inspectionGeneralInfo?.OverallRating">
                      <option [value]="-1">
                        Select a rating
                      </option>
                      <option 
                        *ngFor="let orc of inspectionGeneralInfo?.OverallRatingChoices"
                         [value]="orc.AnswerCode">
                        {{orc.AnswerDescription}}
                      </option>
              </select>