-1

Olá, estou fazendo um cadastro de funcionários no angular, e, para o endereço do funcionário estou utilizando o web service via cep, mas gostaria de colocar o campo do estado em um select e para isso utilizei um json com todos os estados brasileiros, consigo salvar os dados em um array chamado 'estados' (testei com um console.log) porém não consigo carregar os dados salvos nas opções do select.

segue abaixo os códigos, do componente:

import { CepService } from './../../services/cep.service';
import { EstadoBr } from './../../models/estados-br.model';
import { EstadosService } from './../../services/estados.service';

import { SetorService } from './../../setores/setor.service';
import { Setor } from './../../setores/Setor.model';
import { Component, OnInit } from '@angular/core';
import { FormArray, FormBuilder, FormGroup } from '@angular/forms';
import { FuncionarioService } from '../funcionario.service';

@Component({
  selector: 'app-post',
  templateUrl: './post.component.html',
  styleUrls: ['./post.component.css'],
})
export class POSTComponent implements OnInit {
  setores: Setor[];
  estados: EstadoBr[];
  funcionarioForm: FormGroup;

  constructor(
    private fb: FormBuilder,
    private setorService: SetorService,
    private funcionarioService: FuncionarioService,
    private estadosService: EstadosService,
    private cepService: CepService
  ) {
    this.funcionarioForm = this.fb.group({
      nome: [''],
      matricula: [''],
      email: [''],
      telefone: [''],
      setor: [null],
      estado: [''],
      enderecos: this.fb.array([this.addEnderecosGroup()]),
    });
  }

  ngOnInit(): void {
    this.setorService.findAll().subscribe((resposta) => {
      this.setores = resposta;
      this.funcionarioForm.controls.setor.setValue(this.setores[0]);
      console.log(this.setores)
    });
    this.estadosService.findAllEstados().subscribe((resposta: EstadoBr) => {
      this.estados.push(resposta);
      this.funcionarioForm.controls.estado.setValue(this.estados[0]);
      console.log(this.estados)
    });


  }

  addEnderecosGroup() {
    return this.fb.group({
      cep: [''],
      logradouro: [''],
      complemento: [''],
      numero: [''],
      bairro: [''],
      cidade: [''],
      uf: [''],
    });
  }

  get enderecosArray() {
    return <FormArray>this.funcionarioForm.get('enderecos');
  }

  post() {
    console.log(this.funcionarioForm.value);
    this.funcionarioService
      .post(this.funcionarioForm.value)
      .subscribe((resposta) => {
        console.log(this.funcionarioForm.value);
      });
  }

  consultaCep() {
    let cep = '';
    for (let i = 0; i < this.enderecosArray.length; i++) {
      cep = this.enderecosArray.at(i).get('cep').value;
    }

    if (cep != null && cep !== '') {
      this.cepService.consultaCep(cep).subscribe(resposta => this.populaDadosForm(resposta));
    }
      const validacep = /^[0-9]{8}$/;
    }
    populaDadosForm(resposta) {
      for (let i = 0; i < this.enderecosArray.length; i++) {
        this.enderecosArray.at(i).patchValue({
          logradouro: resposta.logradouro,
          complemento: resposta.complemento,
          numero: resposta.numero,
          bairro: resposta.bairro,
          cidade: resposta.localidade,
        });
      }
    }
  }

do html:

<div >
    <form [formGroup]="funcionarioForm">
        <div>
            <label>Nome</label>
            <input type="text" formControlName="nome">
        </div>
        <div>
            <label>Matrícula</label>
            <input type="text" formControlName="matricula">
        </div>
        <div>
            <label>E-mail</label>
            <input type="text" formControlName="email">
        </div>
        <div>
            <label>Telefone</label>
            <input type="text" formControlName="telefone">
        </div>
        <div>
            <label>Setor</label>
            <select class="form-control" id="setor" formControlName="setor" name="setor">
                <option *ngFor="let setor of setores" [ngValue]="setor">
                    {{setor.nome}}
                </option>
              </select>
            </div>
            <div>
              <label>Estado</label>
              <select   formControlName="estado" >
                  <option *ngFor="let estado of estados" [ngValue]="estado.sigla" >
                      {{estado.nome}}
                  </option>
                </select>
              </div>

        <div formArrayName="enderecos">
            <div *ngFor="let group of enderecosArray.controls; let i = index;" [formGroupName]="i">
            <div>
                <label>Cep</label>
                <input type="text" formControlName="cep" name="cep"
                (blur)="consultaCep()">
            </div>
            <div>
                <label>Logradouro</label>
                <input type="text" formControlName="logradouro">
            </div>
            <div>
                <label>Complemento</label>
                <input type="text" formControlName="complemento">
            </div>
            <div>
                <label>Número</label>
                <input type="text" formControlName="numero">
            </div>
            <div>
                <label>Bairro</label>
                <input type="text" formControlName="bairro">
            </div>
            <div>
                <label>Cidade</label>
                <input type="text" formControlName="cidade">
            </div>

            </div>
        </div>
        <button (click)="post()">Salvar</button>
    </form>
</div>

do service dos estados:


import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class EstadosService {

  constructor(private http: HttpClient) { }

  findAllEstados() {
    return this.http.get('assets/jsons/estadosbr.json').pipe();
  }
}

e do service dos funcionários:

import { Observable } from 'rxjs';
import { Funcionario } from './Funcionario.model';
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class FuncionarioService {

  Url = "http://localhost:8080/Funcionarios/";

  constructor(private http: HttpClient) { }

  post(funcionario: Funcionario): Observable<Funcionario>{
    return this.http.post<Funcionario>(this.Url, funcionario)
  }
}

do model do estado:

export class EstadoBr {
    id: Number;
    sigla: string;
    nome: string
}

e do json:

[{
    "id": "1",
    "sigla": "AC",
    "nome": "Acre"
},
     {
    "id": "2",
    "sigla": "AL",
    "nome": "Alagoas"
},
     {
    "id": "3",
    "sigla": "AM",
    "nome": "Amazonas"
},
     {
    "id": "4",
    "sigla": "AP",
    "nome": "Amapá"
},
     {
    "id": "5",
    "sigla": "BA",
    "nome": "Bahia"
},
     {
    "id": "6",
    "sigla": "CE",
    "nome": "Ceará"
},
     {
    "id": "7",
    "sigla": "DF",
    "nome": "Distrito Federal"
},
     {
    "id": "8",
    "sigla": "ES",
    "nome": "Espírito Santo"
},
     {
    "id": "9",
    "sigla": "GO",
    "nome": "Goiás"
},
     {
    "id": "10",
    "sigla": "MA",
    "nome": "Maranhão"
},
     {
    "id": "11",
    "sigla": "MG",
    "nome": "Minas Gerais"
},
     {
    "id": "12",
    "sigla": "MS",
    "nome": "Mato Grosso do Sul"
},
     {
    "id": "13",
    "sigla": "MT",
    "nome": "Mato Grosso"
},
     {
    "id": "14",
    "sigla": "PA",
    "nome": "Pará"
},
     {
    "id": "15",
    "sigla": "PB",
    "nome": "Paraíba"
},
     {
    "id": "16",
    "sigla": "PE",
    "nome": "Pernambuco"
},
     {
    "id": "17",
    "sigla": "PI",
    "nome": "Piauí"
},
     {
    "id": "18",
    "sigla": "PR",
    "nome": "Paraná"
},
     {
    "id": "19",
    "sigla": "RJ",
    "nome": "Rio de Janeiro"
},
     {
    "id": "20",
    "sigla": "RN",
    "nome": "Rio Grande do Norte"
},
     {
    "id": "21",
    "sigla": "RO",
    "nome": "Rondônia"
},
     {
    "id": "22",
    "sigla": "RR",
    "nome": "Roraima"
},
     {
    "id": "23",
    "sigla": "RS",
    "nome": "Rio Grande do Sul"
},
     {
    "id": "24",
    "sigla": "SC",
    "nome": "Santa Catarina"
},
     {
    "id": "25",
    "sigla": "SE",
    "nome": "Sergipe"
},
     {
    "id": "26",
    "sigla": "SP",
    "nome": "São Paulo"
},
     {
    "id": "27",
    "sigla": "TO",
    "nome": "Tocantins"
}]

não incluí o app.module nem o serviço para consultar o cep pois estes não estão ocasionando erros no projeto, desde já obrigado.

1
  • da algum erro no console? Commented 24/09/2020 às 3:01

2 Respostas 2

0

Olá!

Aparentemente o seu retorno de estados já é um array, portanto se fizer "estados.push(resposta)" vc está inserindo um array dentro de um array.

Portanto, basta atributos sua variável de estados a resposta.

this.estadosService.findAllEstados().subscribe((resposta: EstadoBr) => {
    this.estados = respota;
    this.funcionarioForm.controls.estado.setValue(this.estados[0]);
});
0

Basicamente toda requisição HTTP, no angular, retornam observables e estes são assíncronos por natureza, isto é, você não tem certeza quando vai ser executado ou retornará um valor. Para que possamos ser notificados e saber o retorno dessa requisição precisamos nos inscrever no observable através do método subscribe().

Um “erro” muito comum ao lidar com observables é utilizar variáveis síncronas para pegar o valor de retorno do observable. Vou utilizar seu código como exemplo.

this.setorService.findAll().subscribe((resposta) => {
      this.setores = resposta;
      this.funcionarioForm.controls.setor.setValue(this.setores[0]);
      console.log(this.setores)
});

Muitas vezes essa abordagem funciona, porém ela é muito suscetível a erros, pois podem ocorrer atrasos na request, logo a variável setores pode não receber o valor antes da primeira utilização, e qual será o valor de setores neste momento? undefined.

Se você quiser testar, coloque um console.log(this.setores) fora dos subscribes e verá que possivelmente o valor do console será undefined. Pois é possível que o log tenha sido executado antes mesmo da request ser concluída.

Caso esse atraso ocorra seu código irá “quebrar” e tudo que depender da variável setores não funcionará.

No seu caso, não é necessário atribuir os resultados das requisições à variáveis síncronas, você pode utilizar os observables diretamente no componente, dispensando também o uso do subscribe(). Outra parte que não se faz necessária é o uso dos patchValue aos campos setor e estado do form, pois estes são de escolha do usuário, certo?

Fazendo algumas alterações no componente podemos corrigir esse "problema"

Component:

setores$:Observable<Setor[]> // substitui a variável setores
estados$:Observable<EstadosBR[]> // substitui a variável estados

ngOnInit(): void {
    setores$=this.setorService.findAll().pipe(
        //qualquer operador do RXJS 
    );
    estados$=this.estadosService.findAllEstados().pipe(
        //qualquer operador do RXJS
    );
}

Dessa forma você está atribuindo aos observables os observables da HTTP requests, e no método pipe() você pode modificar, filtrar, copiar o valor do observable.

Note que até então essas operações não serão executadas, a request só irá acontecer a partir do momento em que realizarmos o subscribe

Template:

<div>
     <label>Setor</label>
     <select class="form-control" id="setor" formControlName="setor" name="setor">
           <option *ngFor="let setor of setores$ | async" [value]="setor">
                {{setor.nome}}
           </option>
     </select>
</div>
<div>
     <label>Estado</label>
     <select formControlName="estado" >
        <option *ngFor="let estado of estados$ | async" [value]="estado.sigla" >
              {{estado.nome}}
        </option>
     </select>
</div>

A estrutura do template não se modificou tanto assim. Só acrescentamos no *ngFor() o pipe ASYNC que fará o subscribe() e unsubscribe() automático.

Dessa forma quando o usuário utilizar o select ele poderá escolher as opções.

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 .