post form data angular 4

Question

I want to create a new user in my application using angular 4. I add a new user by using a form. I can add him now without API now I want to use API so I want to send this form to API

when click saves form after entering required data function :

employes: Employees[]=[
  // new Employees('aya','test','aya@test.com',45656,true,false)
];

onEmployeeSave(employee: Employees){

  let newEmployee = {
   name: employee.name,
   job: employee.job,
   email: employee.email,
   mob: employee.mob,
   isActive: employee.isActive,
   isMember: employee.isMember
 }
 this.dataStorageService.storeEmployee(newEmployee);        
 this.employes.push(newEmployee);
 this.addEmployeeForm.reset();
 this.modalRef.close();
}

and that's data-storage.service.ts:

getEmployees(): Observable<any>{
    return this.http.get('http://api.###.com/api/Employees/getEmployees');
  }
  storeEmployee(employes: Employees){
  return this.http.post('http://###.com/api/employees/PostEmployee?empId=1&name='+name+'&job='+job+'&email='+email+'&isActive='+isActive+'&mobile='+mob+'&councilMember='+isMember+'&jobId=1', employes );
}

employees.component.html:

        <!-- pop up body -->
            <div class="modal-body" >
            <form [formGroup]="addEmployeeForm" (ngSubmit)="onSubmit(f)" #f="ngForm">
            <div class="row">
             <div class="form-group" class="col-lg-12">
               <ul class="flex-outer">
                <li>
                 <label for="first-name"> name </label>
                  <input type="text" ngModel name="name" formControlName="name">
                </li>
                <li>
                 <label for="job"> job</label>
                  <select ngModel name="job" formControlName="job" required  > 
                    <option *ngFor="let job of jobs" [value]="job.name"> {{ job.name }} </option>
                   </select>
                  </li>
                   <li>
                   <label for="email">email</label>
                   <input type="email" ngModel name="email" formControlName="email" >
                   </li>
                    <li>
                      <label for="mobile"> mob </label>
                       <input type="number" ngModel name="mob" formControlName="mob">
                    </li>
                    <li>
                      <label for="check"> active</label>
                      <div class="form-check">
                       <label class="form-check-label">
                         <input type="checkbox" class="form-check-input" ngModel name="isActive" formControlName="isActive">
                       </label>
                     </div>
                     </li>
                    <li>
                      <label for="check">member  </label>
                        <div class="form-check">
                          <label class="form-check-label">
                          <input type="checkbox" class="form-check-input" ngModel name="isMember" formControlName="isMember">
                           </label>
                         </div>
                         </li>
                        </ul>
                      </div> 

         <button type="submit" class="btn btn-success" (click)="onEmployeeSave(addEmployeeForm.value)"> حفظ </button>

                                </form>
                            </div>
                        </div>


            <div style="overflow-x:auto;">
                <table class="table table-hover table-condensed text-center">
                    <thead>
                        <tr>
                            <th> name </th>
                            <th> job </th>
                            <th> email </th>
                            <th> mob </th>
                            <th> member </th>
                            <th> active </th>
                            <th> edit</th>
                        </tr>
                    </thead>
                    <tbody>
                         <tr *ngFor="let employee of employes">
                            <td> {{employee.Emp_Name}} </td>
                            <td> {{employee.Job}} </td>
                            <td> {{employee.Email}} </td>
                            <td> {{employee.Mobile}} </td>
                            <td> {{employee.Is_Active}} </td>
                            <td> {{employee.Council_Member}} </td>
                            <td> 

                            </td>
                        </tr> 
                    </tbody>
                </table>

I have an error: can't find name 'mob', can't find name 'job', can't find name 'email', can't find name 'isMember', can't find name 'isActive'

any help?

Answer 1

Modify your storeEmployee method:

storeEmployee(employes: Employees){
  return this.http.post('http://###.com/api/employees/PostEmployee?empId=1&name='+employes.name+'&job='+employes.job+'&email='+employes.email+'&isActive='+employes.isActive+'&mobile='+employes.mob+'&councilMember='+employes.isMember+'&jobId=1', employes );
}

Try this to check the response from server:

storeEmployee(employes: Employees){
    let url = 'http://###.com/api/employees/PostEmployee?empId=1&name='+employes.name+'&job='+employes.job+'&email='+employes.email+'&isActive='+employes.isActive+'&mobile='+employes.mob+'&councilMember='+employes.isMember+'&jobId=1';
    let headers = new Headers({ 'Content-Type': 'text/plain' });
    let options = new RequestOptions({ headers: headers }); 
    return this.http.post(url, JSON.stringify(employes), options)
        .map((res: Response) => res.json())
        .subscribe(
            data => {
                console.log(data);
                return true;
            },
            error => {
                console.log(error);
                console.error("Error saving employes!");
                return false;
            }
    );
}