Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Quando digito o CEP os outros dados não completam

Olá,

Quando o digito o CEP os dados não estão sendo completados. Procurei o erro, mas não encontrei. Abaixo o meu código:

HTML

<main class="principal">
  <h2 class="principal__titulo">Dados do cadastro</h2>

  <form class="principal__formulario" id="formulario" #f="ngForm" (ngSubmit)="cadastrar(f)">
    <h3 class="principal__subtitulo">Dados pessoais</h3>
    <div class="formulario__campo">
      <label class="campo__etiqueta" for="nome">Nome Completo</label>
      <input 
        name="nome" 
        id="nome" 
        class="campo__escrita" 
        ngModel 
        required 
        minlength="2"
        #nome="ngModel"  
      >

      omitido

    <div class="formulario__campo">
      <label class="campo__etiqueta" for="cep">CEP</label>
      <input name="cep" id="cep" class="campo__escrita" ngModel required #cep="ngModel" 
      pattern="^(\d{5})(-?\d{3})$" minlength="8" maxlength="9" (blur)="consultaCep($event, f)" />
      <div *ngIf="(cep?.invalid && cep?.touched) || cep?.dirty">
        <app-mensagem *ngIf="cep?.errors?.['required']" mensagem="CEP é obrigatório"></app-mensagem>
        <app-mensagem *ngIf="cep?.errors?.['pattern']" mensagem="O campo deve seguir o exemplo: 00000-000"></app-mensagem>
      </div>
    </div>

    omitido

    </form>
</main>
2 respostas

Service

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

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

  url_API = 'https://viacep.com.br/ws/'

  constructor(private http: HttpClient) { }

  getConsultaCep(cep: string) {
    return this.http.get(`${this.url_API}${cep}/json`)
  }
}

Componente cadastro

import { ConsultaCepService } from "./../service/consulta-cep.service";
import { Router } from "@angular/router";
import { Component, OnInit } from "@angular/core";
import { NgForm } from "@angular/forms";

@Component({
  selector: "app-cadastro",
  templateUrl: "./cadastro.component.html",
  styleUrls: ["./cadastro.component.css"],
})
export class CadastroComponent implements OnInit {
  constructor(
    private router: Router,
    private consultaCepService: ConsultaCepService
  ) {}

  ngOnInit(): void {}

  cadastrar(form: NgForm) {
    if (form.valid) {
      this.router.navigate(["./sucesso"]);
    } else {
      alert("formulário inválido");
    }
    console.log(form);
  }

  consultaCep(ev: any, f: NgForm) {
    const cep = ev.target.value;
    if (cep !== '') {
      this.consultaCepService.getConsultaCep(cep).subscribe(resultado => {
        this.populandoEndereco(resultado, f);
        console.log(resultado);
      });
    }
  }

  populandoEndereco(dados: any, form: NgForm) {
    form.form.patchValue({
      endereco: dados.logradouro,
      complemento: dados.complemento,
      bairro: dados.bairro,
      cidade: dados.localidade,
      estados: dados.uf,
    })
  }
}
solução!

Provavelmente você esqueceu de colocar o ngModel nos campos que não estão sendo preenchidos.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software