0

Estou fazendo uma consulta de CEP e preencho automaticamente os inputs com o resultado da requisição, porém quando envio o form os dados requisitados são enviados como null no JSON onSubmit. Podem me ajudar?

import { EnderecoService } from './../../services/register-service';
import { Component, OnInit, HostListener } from '@angular/core';
import { Endereco } from './endereco.model';


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

  private cep;
  private endereco: Endereco;
  constructor(private getEnderecoData: EnderecoService) { }

  ngOnInit() { }

  getAddress = (cep) => {
    this.getEnderecoData.getEndereco(cep).subscribe(response => {
      this.endereco = response;
    }),function(error){
      if(error.status === 404){
        alert('Cep não encontrado!');
      }
    }
  }

  onSubmit = (form) =>{
    console.log(form.value)
  }
}
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed">
    <a class="navbar-brand" href="#"><i class="material-icons arrow-back">keyboard_backspace</i></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
</nav>
<div class="padding">
    <div class="text-center">
        <h3>Formulário de Cadastro</h3>
    </div>
    <div class="container">
        <form #form="ngForm" (ngSubmit)="onSubmit(form)">
            <h3>Dados pessoais</h3>
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label for="name">Nome Completo</label>
                        <input type="text" required class="form-control" ngModel id="name" name="name" placeholder="Nome">
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label for="cpf">CPF</label>
                        <input type="number" pattern="[0-9]*" required class="form-control" ngModel name="cpf" id="cpf" placeholder="123.456.789-10">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-4">
                    <div class="form-group">
                        <label for="telefone">Telefone</label>
                        <input type="number" pattern="[0-9]*" required class="form-control" ngModel id="telefone" name="telefone" placeholder="(31) 99999-9999">
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="form-group">
                        <label for="password">Senha</label>
                        <input type="password" required [(ngModel)]="password" class="form-control" id="password" name="password">
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="form-group">
                        <label for="cpass">Confirmar Senha</label>
                        <input type="password" [(ngModel)]="cpass" class="form-control" onpaste="return false" id="cpass" name="cpass">
                    </div>
                    <div class="alert alert-danger" *ngIf="password!==cpass">
                        <small class="form-text text-left">As senhas não conferem!</small>
                    </div>
                </div>
            </div>
            <h3>Dados Financeiros</h3>
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label for="cardnumber">Numero do Cartão</label>
                        <input type="number" pattern="[0-9]*" ngModel class="form-control" id="cardnumber" name="cardnumber" placeholder="0000 0000 0000 0000">
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label for="cvv">CVV</label>
                        <input type="number" pattern="[0-9]*" ngModel class="form-control" id="cvv" name="cvv" placeholder="123">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label for="dtvalid">Data de Validade</label>
                        <input type="number" pattern="[0-9]*" ngModel class="form-control" id="dtvalid" name="dtvalid" placeholder="01/2020">
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label for="nameTit">Nome do titular</label>
                        <input type="text" class="form-control" ngModel id="nameTit" name="nameTit" aria-describedby="nomeTit" placeholder="Nome">
                        <small id="nomeTit" class="form-text text-muted">Exatamente como está escrito no cartão</small>
                    </div>
                </div>
            </div>

            <h3>Endereço</h3>
            <div class="row">
                <div class="col-sm-4">
                    <div class="form-group">
                        <label for="cep">CEP</label>
                        <input type="number" ngModel #cep="ngModel" required (change)="getAddress($event.target.value)" class="form-control" id="cep" name="cep" placeholder="99999-999">
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label for="logradouro">Logradouro</label>
                        <input type="text" ngModel [value]="endereco!=undefined?endereco.logradouro:null" class="form-control" id="logradouro" name="logradouro" placeholder="Ex: Afonso Pena">
                    </div>
                </div>
                <div class="col-sm-2">
                    <div class="form-group">
                        <label for="numero">Numero</label>
                        <input type="text" pattern="[0-9]*" ngModel required class="form-control" id="numero" name="numero" placeholder="123">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-2">
                    <div class="form-group">
                        <label for="complemento">Complemento</label>
                        <input type="text" required ngModel [value]="endereco!=undefined?endereco.complemento:null" class="form-control" id="complemento" name="complemento" placeholder="Apto 103">
                    </div>
                </div>
                <div class="col-sm-2">
                    <div class="form-group">
                        <label for="estado">Estado</label>
                        <input type="text" ngModel [value]="endereco!=undefined?endereco.uf:null" class="form-control" id="estado" name="estado" placeholder="SP">
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="form-group">
                        <label for="bairro">Bairro</label>
                        <input type="text" ngModel [value]="endereco!=undefined?endereco.bairro:null" class="form-control" id="bairro" name="bairro" placeholder="Exemplo">
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="form-group">
                        <label for="cidade">Localidade</label>
                        <input type="text" ngModel [value]="endereco!=undefined?endereco.localidade:null" class="form-control" id="cidade" name="cidade" placeholder="Belo Horizonte">
                    </div>
                </div>
            </div>
            <button type="submit" class="btn btn-primary">Cadastrar</button>
        </form>
    </div>
</div>

9
  • Mas, pq vc está atribuindo as funções em variáveis??
    – LeAndrade
    Commented 26/08/2019 às 17:06
  • por pratica de fazer assim mesmo, acha que pode ser por isso que não ta funcionando ? Commented 26/08/2019 às 17:12
  • Pode ser que sim, pode ser que não, difícil falar pq não tem como reproduzir o exemplo, mas, tenta criar as funções diretamente, pra ver se o erro persiste.
    – LeAndrade
    Commented 26/08/2019 às 17:23
  • mesmo fazendo essa alteração ele continua enviando no onSubmit os dados do endereço Vazios (como se não tivesse nada no input), teria outra forma de setar o valor do input diferente do [value] ? pode ser que seja isso... para o conteudo do request ir no onSubmit eu tenho que entrar no input alterar algo e mudar de input ai sim ele aparece no json do onsubmit Commented 26/08/2019 às 17:33
  • Estou falando tudo a base de achismo, mas, acho que terá que ver a lógica dentro desses [value]
    – LeAndrade
    Commented 26/08/2019 às 17:38

1 Resposta 1

1

Resolvido, Mal uso da funcionalidade do angular, mudei o objeto endereco no TS para publicdo e inicie com new() e substitui o [value] por [(ngModel)] e funcionou perfeitamente. Segue codigo:

import { EnderecoService } from './../../services/register-service';
import { Component, OnInit, HostListener } from '@angular/core';
import { Endereco } from './endereco.model';


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

  endereco = new Endereco;
  constructor(private getEnderecoData: EnderecoService) { }

  ngOnInit() { }

  getAddress = (cep) =>{
    this.getEnderecoData.getEndereco(cep).subscribe(response => {
      this.endereco = response;
    }),function(error){
      if(error.status === 404){
        alert('Cep não encontrado!');
      }
    }
  }

  onSubmit = (form) => {
    console.log(form.value)
  }
}
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed">
    <a class="navbar-brand" href="#"><i class="material-icons arrow-back">keyboard_backspace</i></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
</nav>
<div class="padding">
    <div class="text-center">
        <h3>Formulário de Cadastro</h3>
    </div>
    <div class="container">
        <form #form="ngForm" (ngSubmit)="onSubmit(form)">
            <h3>Dados pessoais</h3>
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label for="name">Nome Completo</label>
                        <input type="text" required class="form-control" ngModel id="name" name="name" placeholder="Nome">
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label for="cpf">CPF</label>
                        <input type="number" pattern="[0-9]*" required class="form-control" ngModel name="cpf" id="cpf" placeholder="123.456.789-10">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-4">
                    <div class="form-group">
                        <label for="telefone">Telefone</label>
                        <input type="number" pattern="[0-9]*" required class="form-control" ngModel id="telefone" name="telefone" placeholder="(31) 99999-9999">
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="form-group">
                        <label for="password">Senha</label>
                        <input type="password" required [(ngModel)]="password" class="form-control" id="password" name="password">
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="form-group">
                        <label for="cpass">Confirmar Senha</label>
                        <input type="password" [(ngModel)]="cpass" class="form-control" onpaste="return false" id="cpass" name="cpass">
                    </div>
                    <div class="alert alert-danger" *ngIf="password!==cpass">
                        <small class="form-text text-left">As senhas não conferem!</small>
                    </div>
                </div>
            </div>
            <h3>Dados Financeiros</h3>
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label for="cardnumber">Numero do Cartão</label>
                        <input type="number" pattern="[0-9]*" ngModel class="form-control" id="cardnumber" name="cardnumber" placeholder="0000 0000 0000 0000">
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label for="cvv">CVV</label>
                        <input type="number" pattern="[0-9]*" ngModel class="form-control" id="cvv" name="cvv" placeholder="123">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label for="dtvalid">Data de Validade</label>
                        <input type="number" pattern="[0-9]*" ngModel class="form-control" id="dtvalid" name="dtvalid" placeholder="01/2020">
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label for="nameTit">Nome do titular</label>
                        <input type="text" class="form-control" ngModel id="nameTit" name="nameTit" aria-describedby="nomeTit" placeholder="Nome">
                        <small id="nomeTit" class="form-text text-muted">Exatamente como está escrito no cartão</small>
                    </div>
                </div>
            </div>

            <h3>Endereço</h3>
            <div class="row">
                <div class="col-sm-4">
                    <div class="form-group">
                        <label for="cep">CEP</label>
                        <input type="number" ngModel #cep="ngModel" required (change)="getAddress($event.target.value)" class="form-control" id="cep" name="cep" placeholder="99999-999">
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label for="logradouro">Logradouro</label>
                        <input type="text" ngModel [(ngModel)]="endereco.logradouro" class="form-control" id="logradouro" name="logradouro" placeholder="Ex: Afonso Pena">
                    </div>
                </div>
                <div class="col-sm-2">
                    <div class="form-group">
                        <label for="numero">Numero</label>
                        <input type="text" pattern="[0-9]*" ngModel required class="form-control" id="numero" name="numero" placeholder="123">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-2">
                    <div class="form-group">
                        <label for="complemento">Complemento</label>
                        <input type="text" required ngModel [(ngModel)]="endereco.complemento" class="form-control" id="complemento" name="complemento" placeholder="Apto 103">
                    </div>
                </div>
                <div class="col-sm-2">
                    <div class="form-group">
                        <label for="estado">Estado</label>
                        <input type="text" ngModel [(ngModel)]="endereco.uf" class="form-control" id="estado" name="estado" placeholder="SP">
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="form-group">
                        <label for="bairro">Bairro</label>
                        <input type="text" ngModel [(ngModel)]="endereco.bairro" class="form-control" id="bairro" name="bairro" placeholder="Exemplo">
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="form-group">
                        <label for="cidade">Localidade</label>
                        <input type="text" ngModel [(ngModel)]="endereco.localidade" class="form-control" id="cidade" name="cidade" placeholder="Belo Horizonte">
                    </div>
                </div>
            </div>
            <button type="submit" class="btn btn-primary" [disabled]="form.valid">Cadastrar</button>
        </form>
    </div>
</div>

Obrigado LeAndrade pelo apoio!

1
  • Boa, legal que conseguiu resolver man, sucesso!
    – LeAndrade
    Commented 26/08/2019 às 22:37

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 .