Problem in saving states according to cities in Angular 4

When selecting the state it is loading perfectly the cities according to state the problem is at the time of saving it it exchanges the information, I need help to correct 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 will be stored the state ID in the uf variable then it will compare the state ID with the state code of the city entity, if it is true then 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 just above can only implement the listings of the cities according to the state but to save it it changes the records.

I need to try to fix this, if anyone is in doubt I'll be here to clarify in order to 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 HTML code snippet:

  <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:

Andthisisoneofthecities:

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