2

Fiz um componente de busca de CEP desta forma:

Criei o componente, seu HTML é:

<fieldset [disabled]="isLoading">
    <div class="row col-md-6">
        <div class="row">
            <div class="col-md-4">
                <div class="form-group">
                    <label for="cep">CEP</label>
                    <input type="text" class="form-control" id="cep" placeholder="00000-000" [(ngModel)]="cep.cep" />
                </div>
            </div>
            <div class="col-md-8">
                <button class="btn btn-primary" type="button" (click)="buscar()" [disabled]="isLoading">Buscar</button>
            </div>
        </div>
        <div class="row">
            <div class="col-md-8">
                <div class="form-group">
                    <label for="logradouro">Logradouro</label>
                    <input type="text" class="form-control" id="logradouro" placeholder="Logradouro" [(ngModel)]="cep.logradouro" />
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-group">
                    <label for="numero">Número</label>
                    <input type="text" class="form-control" id="numero" placeholder="Numero" [(ngModel)]="cep.numero" />
                </div>
            </div>
        </div>
        <div class="form-group">
            <label for="complemento">Complemento</label>
            <input type="text" class="form-control" id="complemento" placeholder="complemento" [(ngModel)]="cep.complemento" />
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label for="cidade">Cidade</label>
                    <input type="text" class="form-control" id="cidade" placeholder="Cidade" [(ngModel)]="cep.cidade" />
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label for="bairro">Bairro</label>
                    <input type="text" class="form-control" id="bairro" placeholder="Bairro" [(ngModel)]="cep.bairro" />
                </div>
            </div>
        </div>
        <div class="form-group">
            <label for="estado">Estado</label>
            <input type="text" class="form-control" id="estado" placeholder="Estado" [(ngModel)]="cep.estado" />
        </div>
    </div>
</fieldset>

Seu component.ts é:

import { Component, OnInit } from '@angular/core';
import {CepService} from '../../services/cep/cep.service';
import {Cep} from '../../cep';

@Component({
  selector: 'cep',
  templateUrl: './cep.component.html',
  styleUrls: ['./cep.component.css']
})
export class CepComponent implements OnInit {

  cep = new Cep();
  isLoading = false;

  constructor(private cepService: CepService) { }

  ngOnInit() {

  }

  buscar() {
    this.isLoading = true;
    this.cepService.buscar(this.cep.cep)
    .then((cep: Cep) => {
      this.isLoading = false;
      this.cep = cep;
    })
    .catch(() => {
      this.isLoading = false;
      const cep = this.cep.cep;
      this.cep = new Cep();
      this.cep.cep = cep;
      alert('Não possível continuar a busca');
    })
  }
}

E criei um Service para buscar de uma API:

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import {Cep} from './../../cep';
import 'rxjs';

@Injectable()
export class CepService {

    constructor(private http:Http) { }

    buscar(cep:string){
        return this.http.get(`https://viacep.com.br/ws/${cep}/json/`)
            .toPromise()
            .then(response => this.converterRespostaParaCep(response.json()));
    }

    private converterRespostaParaCep(cepNaResposta):Cep{
        let cep = new Cep();
        cep.cep = cepNaResposta.cep;
        cep.logradouro = cepNaResposta.logradouro;
        cep.complemento = cepNaResposta.complemento;
        cep.bairro = cepNaResposta.bairro;
        cep.cidade = cepNaResposta.localidade;
        cep.estado = cepNaResposta.uf;
        return cep;
    }
}

E um arquivo cep.ts na raiz com os campos:

export class Cep{
    cep:string;
    logradouro:string;
    numero:string;
    complemento:string;
    cidade:string;
    bairro:string;
    estado:string;
}

Funciona perfeito.

Porém, como reaproveitar este componente de busca de CEP em outros formulários, pegando os resultados da busca de cep e jogando para os outros formulários?

Tipo, tenho meu formulário, coloco <cep></cep> e incorpora meu componente de busca de cep, ok!

Telefone
<cep></cep>

<div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">IDPoker</label>
    <div class="col-sm-10">
        <input type="text" class="form-control" id="idpoker" name="idpoker" placeholder="IDPoker" [(ngModel)]="jogador.idpoker" required>
    </div>
</div>

Ai neste formulário tenho seu TS desta forma aqui:

import { Component, OnInit } from '@angular/core';
import { JogadorService } from './../../services/jogador.service';
import { Router, ActivatedRoute } from '@angular/router';
import { MessageService } from '../../services/message.service';

@Component({
  selector: 'app-jogador-form',
  templateUrl: './jogador-form.component.html',
  styleUrls: ['./jogador-form.component.css']
})
export class JogadorFormComponent implements OnInit {

  jogador = {
    id: null,
    nome: '',
    email: '',
    cpf: '',
    celular: '',
    telefone: '',
    idpoker: '',
    nickpoker: '',
    foto: '',
    usuario: '',
    senha: ''
  };

  constructor(private jogadorService: JogadorService,
    private router: Router,
    private route: ActivatedRoute,
    private messageService: MessageService) { }

  ngOnInit() {
    console.log('id');
    this.route.params.subscribe(params => {
      if(params.hasOwnProperty('id')){
        this.jogadorService.find(params['id'])
        .subscribe(data => this.jogador = data);
      }
    });
  }

  save() {
    console.log(this.jogador);
    this.jogadorService.save(this.jogador)
        .subscribe(() => {
            this.messageService.message = 'Jogador cadastrado com sucesso.';
            alert('pasou aqui');
            // this.router.navigate(['/posts'])
        });
}

}

Como realmente reutilizo o componente de busca de CEP em meu formulário e salvo na minha API os dados do componente de CEP?

Obrigado.

1 Resposta 1

1

Você pode utilizar o @Output junto com EventEmitter e "publicar" seu novo dado para quem utilizar o componente. No seu CepComponent criar a propriedade:

@Output() cepResult: EventEmitter<Cep> = new EventEmitter();

E quando você recebe o valor:

this.cepService.buscar(this.cep.cep)
 .then((cep: Cep) => {
   this.isLoading = false;
   this.cep = cep;
   // você está emitindo o novo valor
   this.cepResult.next(cep);
})

E nos componentes que usarem seu <cep></cep, no HTML:

<cep (cepResult)="metodoParaPegarOValor($event)"></cep>

E no .ts:

metodoParaPegarOValor(event) {
   // valor atualizado
   console.log(event);
}
1
  • Deu certo. Obrigado @Patrick Lima.
    – Ramos
    Commented 26/11/2018 às 13:45

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .