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>