Estou tentando fazer um campo do tipo select
em um formulário no Angular com Materialize, e preenchê-lo dinamicamente, mas, ao chegar na diretiva *ngFor
, o Angular passa a ignorar o campo:
HTML:
<!-- campo que não funciona -->
<div class="input-field col s4">
<select formControlName="item_id_dinamic">
<option [ngValue]="" disabled selected>Escolha o item:</option>
<option *ngFor="let item of itens" [ngValue]="item.id">{{ item.name }}</option>
</select>
</div>
<!-- campo estático funcionando -->
<div class="input-field col s4">
<select formControlName="item_id_static">
<option [ngValue]="" disabled selected>Escolha o banco:</option>
<option [ngValue]="1">Opção 1</option>
<option [ngValue]="2">Opção 2</option>
</select>
</div>
O resultado na apresentação dos campos é esse:
Uso das opções de forma estática
Gerado dinamicamente pela aplicação
Meu componente TypeScript está montado dessa forma:
export class FormItensComponent implements OnInit {
itens: Item[] = ITENS; // puxado array de outra parte da aplicação
itemForm: FormGroup;
constructor(
private formBuilder: FormBuilder
){}
ngOnInit() {
// usado para inicializar o select com Materialize
var elems = document.querySelectorAll('select');
var instances = M.FormSelect.init(elems);
this.itemForm = this.formBuilder.group({
item_id_dinamic: ['', Validators.required],
item_id_static: ['', Validators.required]
});
/* detalhes de leitura de dados do banco omitidas */
}
}
Exemplo de itens possíveis (JSON):
{
id: 1,
name: 'Item 1'
},
{
id: 2,
name: 'Item 2'
},
{
id: 3,
name: 'Item 3'
},
{
id: 4,
name: 'Outro'
}
It looks like you're using ngModel on the same form field as formControlName. Support for using the ngModel input property and ngModelChange event with reactive form directives has been deprecated in Angular v6 and will be removed in Angular v7.