Problem in saving states according to the city in Angular 4

Question

When selecting the state it is perfectly loading the cities according to state the problem is at the time of saving it exchanges the information, need help to fix the algorithm, I believe it is simple thing.

I think the problem is here!

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);

          }
        }

      });

    }
  }

It works as follows! When selecting state the state ID will be stored in the variable Uf ai then it will compare the state ID with the city entity code, if it is true there it will load only the cities that are actually corresponding to the state.

But when submitting the form it changes the records because the algorithm shown above can only implement the city listings according to the state but to save it changes the records.

I need to try to fix this, if anyone has any questions I’ll be here to clarify so you can help me.

This is my component:

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);

          }
        }

      });

    }
  }




}

This is the code snippet in 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>

The implementation is behaving like this:

And this is the cities:

Today as he is behaving like this, for example, if you look at the figure of the state in code 6 refers to São Paulo, then the user selects the São Paulo that is code 6, but in reality he is saving in the bank the Code 6 city that is Goiâna in the state of Goias, That’s how the incorrect implementation is found today, I need to correct it.