2

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.

10
  • os valores do vetor itens são passados no momento da inicialização do componente, assim como os valores de modelo são passados através de uma inbound property. Eu apenas dei um *ngFor nos elementos desse array, assim como usei os dados de modelo para preencher o formulário. A minha questão é mais sobre a propriedade value do select, 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 que modelo esteja definido) 28/10/2019 às 17:58
  • 1
    Não vi nada de errado, o *ngFor era pra estar funcionando, tentou trocar o [ngValue] por [value]?
    – LeAndrade
    28/10/2019 às 18:23
  • 1
    Não sei se o seu ngSubmit aí na sua máquina está errado, mas, aqui está faltando o (. Faz o seguinte dentro do ngOnInit() coloca um console.log(itens) pra ver o que mostra.
    – LeAndrade
    28/10/2019 às 18:41
  • 1
    A única coisa que acho que pode ser aí, é o setTimeout() no set do modelo, provavelmente deve estar resetando o select, é a única coisa que vejo para o problema.
    – LeAndrade
    28/10/2019 às 18:58
  • 1
    @ArthurSiqueira não sei se entendi muito bem mas inicialmente seu combo pode vir sem nenhum valor selecionado e isto está funcionando perfeitamente. Se o valor for definido no modelo item_id você gostaria de selecionar o item no combo, seria isto? 29/10/2019 às 13:50

1 Resposta 1

1

Arthur, pelo que entendi, quando o campo item_id do seu modelo for preenchido significa que um item deve ser selecionado por padrão no seu combo. Se for isto faça o bind do [value] no seu select. Veja um exemplo:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  itens = [
    { id: 1, name: 'item1' },
    { id: 2, name: 'item2' },
    { id: 3, name: 'item3' },
    { id: 4, name: 'item4' },
    { id: 5, name: 'item5' }
  ];

  modelo = {
    item_id: 5
  };
}

Template:

<select [value]="modelo.item_id">
  <option disabled>Escolha o banco:</option>
  <option *ngFor="let item of itens" [value]="item.id">{{ item.name }}</option>
</select>

Se o item_id estiver preenchido, ao carregar o componente seu combo terá selecionado o item de mesmo id.

4

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .