0
I am doing a zip code query and automatically filling in the inputs with the result of the request, but when I submit the form the requested data is sent as null in JSON onsubmit. Can you help me?
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>
But, because you are assigning the functions in variables??
– LeAndrade
by practice of doing anyway, think it might be why it’s not working ?
– Arthur Cordeiro
It may be that yes, it may be that no, difficult to speak because there is no way to reproduce the example, but, try to create the functions directly, to see if the error persists.
– LeAndrade
even making this change he keeps sending on onsubmit the Empty address data (as if he had nothing in the input), would he have another way to set the input value other than [value]? it might be that... for the content of the request to go on onsubmit I have to enter the input change something and change input there yes it appears in the json of onsubmit
– Arthur Cordeiro
I’m talking about all the basis of achism, but I think you’ll have to see the logic within those [value]
– LeAndrade
only begs a doubt, if I put to fill with using the [value] of the input theoretically it should go on onsubmit?
– Arthur Cordeiro
Yes, it would contain a value and if all is right in Ubmit, the value should be submitted naturally. I did not understand why did the conditions within the values and not in TS.
– LeAndrade
I did another test and even taking the coditions of the template and making on ts but even so it does not send the value pro onsubmit, I am obliged to enter the input make some change so it can go
– Arthur Cordeiro
Yes, because you are using the function (change) in the zip code, so it will only fill in if you change something in the zip code.
– LeAndrade