Problema no envio de um campo combobox dentro do formulário | Angular: formulários orientados a templates

Solucionado (ver solução)

Solucionado
(ver solução)

3
respostas

Referente ao curso Angular: formulários orientados a templates

por Raphael Lopes Pfeifer

| 259.2k xp | 72 posts

Estou desenvolvendo uma tela que possui um formulário com uma combobox que traz opções de seleção vindas do back-end. Os valor estão vindo corretamento e aparecem na combo, o problema é na hora de salvar o formulário e enviar para o back. O objeto (garagem) não é preenchido com a opção selecionada no combo. Segue o código abaixo:

template html

<section>
    <div class="card-form container">
        <form [formGroup]="tremForm" *ngIf="tremForm">
                <div>
                    <input type="hidden" formControlName="idTrem" class="form-control" >
                </div>
                <div class="form-group">
                    <input  formControlName="nome" class="form-control trem-form-input" placeholder="nome">
                </div>
                <div class="form-group">
                    <input formControlName="qtdVagoes" class="form-control trem-form-input"
                        placeholder="qtd de vagões">
                </div>
                <div class="form-group">
                <select formControlName="garagem" class="form-control trem-form-input">
                    <option selected>Selecione...</option>
                    <option formControlName="garagem" *ngFor="let garagem of garagens$ | async" [value]="garagem.idGaragem">
                        {{garagem.nome}}
                    </option>
                </select>
                </div>
                <div class="btn-group-form">
                    <button type="submit" (click)="salvar()" class="btn btn-danger btn-salvar">
                        Salvar
                    </button>
                    <button type="submit" (click)="remover()" class="btn btn-danger btn-deletar">
                        Deletar
                    </button>
                </div>
        </form>
    </div>
</section>

método que cria o formulário vazio e o método salvar na component

loadEmptyForm(){
        this.tremForm = this.formBuilder.group({
            idTrem: [''],
            nome: ['', Validators.required],
            qtdVagoes: ['', Validators.required],
            garagem: [null]
        });
    }


    salvar(){
        const trem = this.tremForm.getRawValue() as Trem;
        this.tremService
            .salvar(trem)
            .subscribe(
                () => this.router.navigate(['trem']),
                err => console.log(err)
            );
    }

3 respostas

por Estudante

| 563.5k xp | 1338 posts

24/10/2023

Veja se você está utilizando corretamente a diretiva formControlName na tag option dentro do seu select. No seu código, você está utilizando formControlName="garagem" na tag option, mas essa diretiva deve ser utilizada apenas na tag select.

Você pode corrigir isso removendo a diretiva formControlName da tag option e mantendo apenas na tag select, como no exemplo abaixo:

<select formControlName="garagem" class="form-control trem-form-input">
    <option selected>Selecione...</option>
    <option *ngFor="let garagem of garagens$ | async" [value]="garagem.idGaragem">
        {{garagem.nome}}
    </option>
</select>

Dessa forma, o valor selecionado na combobox será corretamente atribuído ao objeto "garagem" no momento de salvar o formulário.

por Raphael Lopes Pfeifer

| 259.2k xp | 72 posts

25/10/2023

Olá Estudante. obrigado pelo retorno!

Eu fiz as alterações que você havia proposto. Ele realmente passa o campo com o id do resgistro. O problema que tenho agora é saber se é possível passar o objeto garagem já preenchido quando selecionado na combo, como no exemplo abaixo:

{idGaragem:2, nome: 'São Caetano', qtdVagas: 4}

solução!

por Raphael Lopes Pfeifer

| 259.2k xp | 72 posts

30/10/2023

Consegui resolver! Alterei na template o parâmetor "value"dentro do option para "ngValue". Na component fiz criei um método instanciar o objeto setar os valores que serão passados para o backend. Segue o código abaixo:

Template:

<select formControlName="garagem" class="form-control trem-form-input">
          <option selected>Selecione...</option>
                <option *ngFor="let garagem of garagens$ | async" [ngValue]="garagem">
                        {{garagem.nome}}
                </option>
 </select>

Component:

salvar(){
       const trem = this.tremForm.getRawValue() as Trem;
       trem.garagem = montarGaragem(trem.garagem)
       console.log('Objeto garagem: ' + trem.garagem);
       this.tremService
           .salvar(trem)
           .subscribe(
               () => this.router.navigate(['trem']),
               err => console.log(err)
           );
   }
   
   
   function montarGaragem(objeto: Garagem): Garagem {
  const garagem = {
           idGaragem: objeto.idGaragem,
           nome: objeto.nome,
           qtdVagas: objeto.qtdVagas
   };
   return garagem;
}