0

Boa tarde pessoal, estou começando um novo estágio e já a alguns dias estou agarrado em uma tarefa que não consigo entender a falha, devo fazer um formulário de cadastro que comunique com uma API já feita e após muitas tentativas o erro persiste: "Cannot read property 'value' of undefined" que aponta para o seguinte trecho do código:

    <form #clienteform="ngForm" (ngSubmit)="onSubmit()">

sendo que os inputs estão codificados da seguinte forma:

     <input type="text" class="form-control" name="Documento" #Documento 
     [(ngModel)]="clienteService.selectedCliente.Documento" 
     placeholder="Documento">

    <input type="text" class="form-control" name="Nome" #Nome 
    [(ngModel)]="clienteService.selectedCliente.Nome" placeholder="Nome">

o método POST na classe cliente.service funciona da seguinte maneira:

    @Injectable()
    export class ClienteService {

    selectedCliente : Cliente;
    clienteList : Cliente[];
    constructor(private http : Http) { }
    urlConfig = 'http://mylookbook.com.br/EasyApi/api/Cliente/';


    postCliente(emp : Cliente){   
    var body = JSON.stringify(emp);
    var headerOptions = new Headers({'Content-Type':'application/json'});
    var requestOptions = new RequestOptions({method : 
    RequestMethod.Post,headers : headerOptions});
    return this.http.post(this.urlConfig+'Create',body,
    requestOptions).map(x => x.json());


    }   

e por fim, o método onSubmit() em cliente.component:

     onSubmit(form: NgForm) {

if (form.value.ClienteId == null) {
  this.clienteService.postCliente(form.value)
    .subscribe(data => {
      this.resetForm(form)
      this.clienteService.getClienteList()
      this.toastr.success('New Record Added Succcessfully', 'Cliente Register')
    })
}

else {
  this.clienteService.putCliente(form.value.ClienteId, form.value)
  .subscribe(data => {
    this.resetForm(form)
    this.clienteService.getClienteList()
    this.toastr.info('Record Updated Successfully!', 'Cliente Register')
  })
 }
}

Os providers e imports já estão configurados da maneira correta, mas aparentemente o "selectedCliente" guarda os valores mas o método POST não os envia, alguem saberia dizer aonde encontra-se a inconsistência no código?

desde já muito grato

2
  • Parece que o erro está em form.value o seu objeto form está definido e tem uma propriedade value? 4/12/2018 às 15:27
  • olá Eduardo, o correto seria colocar uma propriedade value dentro da tag form? No caso o objeto form está definido como #clienteForm="ngForm" mas não atribuí value a ele. Me desculpe o desconhecimento, estou começando com angular agora 4/12/2018 às 15:36

1 Resposta 1

0

Veja que no seu metodo oSubmit vc espera um ngForm e quando vc chama ele no html vc não está passando nada.

<form #clienteform="ngForm" (ngSubmit)="onSubmit(clienteform)">
4
  • tentei utilizar dessa forma mas o erro persiste, agradeço pela disponibilidade de qualquer forma 4/12/2018 às 18:14
  • Na funçao submit da um console log no form que ele retorna? 4/12/2018 às 18:19
  • sim, adicionei um console.log() na função Submit e na função Post, mas ambos não me retornaram a mensagem esperada. 4/12/2018 às 18:32
  • Cara, consegui resolver o problema com suas dicas! muito obrigado! 5/12/2018 às 13:31

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 .