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.