Problems with requests in Angular

Question

Good afternoon guys, I’m starting a new internship and already a few days I’m stuck on a task that I can not understand the failure, I must make a registration form that communicates with an API already made and after many attempts the error persists: "Cannot read Property 'value' of Undefined" which points to the following code snippet:

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

the inputs are coded as follows:

     <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">

the POST method in the client.service class works as follows:

    @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());


    }   

and finally, the onsubmit() method in.Component client:

     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')
  })
 }
}

The providers and Imports are already configured in the correct way, but apparently the "selectedCliente" stores the values but the POST method does not send them, someone could tell where is the inconsistency in the code?

already very grateful

Answer 1

Note that in your methodSubmit you expect an ngForm and when you call it in html vc is not passing anything.

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