fiz um método para consulta de cep e não consigo aplicar os dados no form, obtenho o erro
ERROR Error: Must supply a value for form control with name: ‘nome’.
consultaCEP(cep, form) {
cep = cep.replace(/\D/g, '');
if (cep != "") {
var validacep = /^[0-9]{8}$/;
if (validacep.test(cep)) {
this.http.get(`//viacep.com.br/ws/${cep}/json`).subscribe(dados => {
this.populaDadosForm(dados, form)
})
}
}
}
populaDadosForm(dados, form) {
debugger
form.setValue({
nome: form.value.nome,
email: form.value.email,
cpf: form.value.cpf,
dataNascimento: form.value.dataNascimento,
contato1: form.value.contato1,
contato2: form.value.contato2,
cep: dados.cep,
logradouro: dados.logradouro,
numero: '',
complemento: dados.complemento,
bairro: dados.bairro,
cidade: dados.localidade,
estado: dados.uf
});
}
<form #clienteForm="ngForm" (ngSubmit)="salvar()">
<div class="form-group row">
<div class="col-md-12">
<div class="alert alert-success alert-dismissible fade show" role="alert" *ngIf="msgSuccess">
Cliente salvo/atualizado com sucesso!
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="alert alert-danger alert-dismissible fade show" role="alert" *ngFor let erro of errors>
{{error}}
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-md-12">
<label>Nome</label>
<input type="text" class="form-control" id="nome" [(ngModel)]="cliente.nome" name="nome">
</div>
<div class="col-md-5">
<label>CPF</label>
<input type="text" class="form-control" id="cpf" [(ngModel)]="cliente.cpf" name="cpf">
</div>
<div class="col-md-7">
<label>Email</label>
<input type="text" class="form-control" id="email" [(ngModel)]="cliente.email" name="email">
</div>
<div class="col-md-3">
<label>Data de Nascimento</label>
<input type="text" class="form-control" id="dataNascimento" [(ngModel)]="cliente.dataNascimento"
name="dataNascimento">
</div>
<div class="col-md-4" *ngIf="cliente.id">
<label>Data de Cadastro</label>
<input disabled=true type="text" class="form-control" id="dataCadastro" [(ngModel)]="cliente.dataCadastro"
name="dataCadastro">
</div>
<div class="col-md-3" *ngIf="cliente.id">
<label>Situação</label>
<select class="custom-select" id="inlineFormCustomSelectPref" id="situacao" [(ngModel)]="cliente.situacao"
name="situacao">
<option selected>Situação.</option>
<option value="A">ATIVO</option>
<option value="I">INATIVO</option>
</select>
</div>
<div class="col-md-4">
<label>Contato 1</label>
<input type="text" class="form-control" id="contato1" [(ngModel)]="cliente.contato1" name="contato1">
</div>
<div class="col-md-4">
<label>Contato 2</label>
<input type="text" class="form-control" id="contato2" [(ngModel)]="cliente.contato2" name="contato2">
</div>
</div>
<hr />
<div class="form-group row">
<div class="col-md-12 mb-2">
<label>ENDEREÇO</label>
</div>
<div class="col-md-4" [ngClass]=aplicaCssErro(cep)>
<label>CEP</label>
<input (blur)="consultaCEP($event.target.value, clienteForm)" type="text" class="form-control" id="cep"
[(ngModel)]="cliente.endereco.cep" name="cep" required #cep="ngModel">
<div *ngIf="!cep.valid && cep.touched" class="alert alert-danger alert-dismissible fade show"
role="alert">
O Campo CEP é obrigatório
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
<div class="col-md-2">
<label>Numero</label>
<input type="text" class="form-control" id="numero" [(ngModel)]="cliente.endereco.numero" name="numero">
</div>
<div class="col-md-6">
<label>Complemento</label>
<input type="text" class="form-control" id="complemento" [(ngModel)]="cliente.endereco.complemento"
name="complemento">
</div>
<div class="col-md-10">
<label>Logradouro</label>
<input disabled type="text" class="form-control" id="logradouro" [(ngModel)]="cliente.endereco.logradouro"
name="logradouro">
</div>
<div class="col-md-7">
<label>Bairro</label>
<input disabled type="text" class="form-control" id="bairro" [(ngModel)]="cliente.endereco.bairro"
name="bairro">
</div>
<div class="col-md-4">
<label>Cidade</label>
<input disabled type="text" class="form-control" id="cidade" [(ngModel)]="cliente.endereco.cidade.nome"
name="cidade">
</div>
<div class="col-md-4">
<label>Estado</label>
<input disabled type="text" class="form-control" id="estado" [(ngModel)]="cliente.endereco.cidade.nome"
name="estado">
</div>
</div>
</form>
No angular, vc tem 2 abordagens para forms:
Aqui vc declara os detalhes do form no componente e referencia os campos na tela pela diretiva formControl em cada campo. No componente, vc instancia os formControls e já coloca os detalhes do campo, como validação, por exemplo.
Aqui os campos do form são tratado pela diretiva ngModel , onde vc faz o bind para a propriedade declarada no componente.
Cada abordagem tem sua aplicabilidade. Pelo seu código, parece que é um form reativo. Se for, vc deve colocar no campo um [(formControl)]="nome".
Recomendo que dê uma olhada nos links de cada tipo de form, pois lá há um exemplo de cada tipo.
Obrigado pela explicação lucas, vou tentar e te digo
Lucas_Camara:
template
lucas, aqui no meu caso estou tentando trabalhar apena com o template, como devo fazer nesse caso?
Basicamente é vc declarar uma propriedade no componente:
componente {
obj: Any = {};
}
E no html:
[(ng-model)]="obj.propA"
[(ng-model)]="obj.propB"
Ao fazer isso, o obj do componente será preenchido com os valores de acordo com os inputs do html.
1 curtida