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

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

You need to bind ngModel to the control. Go through this video,
https://www.youtube.com/watch?v=hAaoPOx_oIw

Answer 2

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>