Ao selecionar o estado ele está carregando perfeitamente as cidades de acordo com estado o problema é na hora de salvar ele troca as informações, preciso de ajuda para corrigir o algoritmo, acredito que seja coisa simples.
Eu acho que o problema está aqui!
buscarCidades() {
console.log("Estado: " + this.uf);
this.cidades = [];
if(this.uf) {
this.cidadesService.listarTodasCidades()
.subscribe(cidades => {
if (cidades.length > 0) {
console.log("Qtd total de cidades: " + cidades.length);
}
for (let cidade of cidades) {
if ( parseInt( cidade.codigoEstado) == parseInt(this.uf)) {
console.log('valores da cidade codigo estado é ' + cidade.codigoEstado);
console.log(cidade);
this.cidades.push(cidade);
}
}
});
}
}
Ele funciona da seguinte forma! Ao selecionar estado será armazenado o ID do estado na variavel uf ai depois ele vai comparar o ID do estado com o codigoEstado da entidade cidade, se for verdadeiro ai ele vai carregar somente as cidades que sejam realmente correspondente ao estado.
Porém ao submeter o formulário ele troca os registros porque o Algoritmo mostrado logo a cima somente consegue implementa as listagens das cidades de acordo com o estado mas para salvar ele troca os registros.
Preciso tentar corrigir isso, se alguém tiver dúvida estarei aqui para esclarecer para poder me ajudar.
Esse é meu componente:
import { ToastyService } from 'ng2-toasty';
import { ErrorHandlerService } from './../../core/error-handler.service';
import { ClientesService } from './../clientes.service';
import { FormControl } from '@angular/forms';
import { CidadesService } from './../../cidades/cidades.service';
import { Estado, Cidade, Cliente } from './../../core/model';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-clientes-cadastro',
templateUrl: './clientes-cadastro.component.html',
styleUrls: ['./clientes-cadastro.component.css']
})
export class ClientesCadastroComponent implements OnInit {
//variaveis globais para a lista de estados e cidades
uf: string;
cidades: Cidade[];
estados: Estado[];
//variaveis globais para o campo CPF e CNPJ
tipo: string;
fisica = false;
juridica = false;
statusCampo = true;
cidade = new Cidade();
cliente = new Cliente();
statusMask() {
if (this.tipo === null) {
this.statusCampo = true;
} else if (this.tipo === 'FISICA') {
this.fisica = true;
this.juridica = false;
this.statusCampo = false;
}
if (this.tipo === 'JURIDICA') {
this.juridica = true;
this.fisica = false;
this.statusCampo = false;
}
}
constructor(
private cidadesService: CidadesService,
private clientesService: ClientesService,
private erroHandler: ErrorHandlerService,
private toasty: ToastyService
) { }
ngOnInit() {
this.cidadesService.listarTodosEstados()
.subscribe(estados => this.estados = estados);
}
salvar(form: FormControl) {
this.clientesService.adicionar(this.cliente)
.then(() => {
this.toasty.success('Cliente adicionado com sucesso!');
form.reset();
this.cliente = new Cliente();
})
.catch(erro => this.erroHandler.handle(erro));
}
buscarCidades() {
console.log("Estado: " + this.uf);
this.cidades = [];
if(this.uf) {
this.cidadesService.listarTodasCidades()
.subscribe(cidades => {
if (cidades.length > 0) {
console.log("Qtd total de cidades: " + cidades.length);
}
for (let cidade of cidades) {
if ( parseInt( cidade.codigoEstado) == parseInt(this.uf)) {
console.log('valores da cidade codigo estado é ' + cidade.codigoEstado);
console.log(cidade);
this.cidades.push(cidade);
}
}
});
}
}
}
Essa é o trecho do codigo em HTML:
<div class="ui-g-12 ui-lg-3 ui-md-4 ui-fluid">
<label>Estado</label>
<div>
<select [(ngModel)]="cliente.endereco.cidade.estado.codigo" class="form-control" name="estado" id="estado" [(ngModel)]="uf" (change)="buscarCidades()">
<option *ngFor="let estado of estados" [value]="estado.codigo">{{estado.nome}}</option>
</select>
</div>
</div>
<div class="ui-g-12 ui-lg-3 ui-md-4 ui-fluid">
<label>Cidade</label>
<div>
<select [(ngModel)]="cliente.endereco.cidade.codigo" class="form-control" name="cidade">
<option *ngFor="let cidade of cidades" [value]="cidade.codigoEstado">{{cidade.nome}}</option>
</select>
</div>
</div>
O implementação está se comportando assim, a primeira tabela abaixo e os estados e depois vem as cidade
Hoje como ele está se comportando é assim, por exemplo, se olharem para a figurar dos estado no código 6 se refere a São Paulo, ai o usuário seleciona o São Paulo que é código 6, mas que na realidade ele está salvando no banco o Código 6 de cidade que é Goiâna no estado de Goias, é assim que hoje se encontra a incorreta implementação, preciso corrigir isso.
