Criei um componente que possui um campo de tipo <select>
e recebe uma propriedade [modelo]
como entrada: se o modelo for nulo, o formulário é inicializado vazio; se possuir conteúdo, é inicializado para modificação.
HTML:
<form [formGroup]="modeloForm" (ngSubmit)="ngSubmit(modeloForm.value)">
<input type="text" formControlName="name" id="name" placeholder="Nome"/>
<label for="name">Nome</label>
<select formControlName="item_id" id="item_id">
<option [ngValue]="null" disabled selected>Escolha o banco:</option>
<option *ngFor="let item of itens" [ngValue]="item.id">{{ item.name }}</option>
</select>
<button id="submit-btn" type="submit">
Cadastrar
</button>
</form>
Typescript:
itens: Item = ITENS; // array de itens importados de classe à parte
modeloForm: FormGroup;
_modelo: Modelo | null = null;
@Input() set modelo(modelo: Modelo | null){
this._modelo = modelo;
// tentei setar usando com a sintaxe do JavaScript, mas sem sucesso
document.getElementById("item_id").nodeValue = !!this._modelo ? this._modelo.item_id + '' : '';
// função que serve para resetar o formulário
setTimeout(() => {
this.modeloForm.reset({
name: !!this._modelo ? this._modelo.name : '',
item_id: !!this._modelo ? this._modelo.item_id : ''
});
}, 100);
}
Modelos:
interface Modelo{
id: number;
name: string;
item_id: number;
}
interface Item{
id: number;
name: string;
}
const ITENS: Item[] = [
{id:1, name:'item1'},
{id:2, name:'item2'},
{id:3, name:'item3'},
{id:4, name:'item4'},
{id:5, name:'item5'}
];
Porém, apesar de inicializar o formulário com o nome e o objeto corretamente, o item selecionado no campo <select>
não aparece até que o campo seja selecionado. Como devo proceder?
Já tentei colocar a inicialização no ngInit()
(mesmo sabendo que não funcionaria porque o ngInit
só é chamado quando o componente é inicializado pela primeira vez), inverter a ordem entre a definição pelo nodeValue
e a pelo modeloForm
, comentar a linha onde tento setar manualmente pelo nodeValue
, comentar as linhas onde tento setar pelo modeloForm.reset
e remover esse trecho do setTimeout
, todas sem sucesso.
itens
são passados no momento da inicialização do componente, assim como os valores demodelo
são passados através de uma inbound property. Eu apenas dei um*ngFor
nos elementos desse array, assim como usei os dados demodelo
para preencher o formulário. A minha questão é mais sobre a propriedadevalue
doselect
, que, ao definir um valor padrão, permanece visualmente vazia ao inicializar o componente (se eu selecionei o valor 3, por exemplo, a opção que vai aparecer como vazia quando eu for visualizar o formulário, mesmo quemodelo
esteja definido)[ngValue]
por[value]
?ngOnInit()
coloca um console.log(itens) pra ver o que mostra.item_id
você gostaria de selecionar o item no combo, seria isto?