I am to submit a form to django backend api using angular 4, but there is no any action happen when i click save button. i monitored the backend and there is no any incoming requests i couldn't figure out where my code goes wrong, following my code :
addEmployee.component.ts:
import { Employee } from './../employee';
import { AddEmployeeService } from './add-employee.service';
import { Component, OnInit } from '@angular/core';
import { DataService } from './../../services/data.service';
@Component({
selector: 'app-addemployee',
templateUrl: './addemployee.component.html',
styleUrls: ['./addemployee.component.css']
})
export class AddemployeeComponent implements OnInit {
jobs: Array<any>;
mahalyas: Array<any>;
courses: Array<any>;
employee: Array<any>;
constructor(private dataService: DataService, private AddEmployeeService: AddEmployeeService) { }
ngOnInit() {
this.dataService.getAllMahaleyahs().subscribe(
data => this.mahalyas = data
);
this.dataService.getAllCourses().subscribe(
data => this.courses = data
);
this.dataService.getAllJobs().subscribe(
data => this.jobs = data
);
}
onSave(){
this.dataService.saveEmployee(this.employee);
}
}
Employee.ts:
export class Employee
{
constructor
(
public id: number,
public name: string,
public grade: string,
public maritial_status: string,
public number_of_children: string,
public spouse_work_place: string,
public parent_status: string,
public helth_status: string,
public date_of_transfer_to_mahaleyah: string,
public address: string,
public mobile_number: string,
public employment_type: string,
public qualification: string,
public extra_qualification: string,
public note: string,
public job: string,
public previouse_mahaleyah: string,
public courses: string){}
}
addEmployee.component.html:
<div class="main-content">
<div class="row">
<div class="col-sm-8 col-xs-offset-2">
<div class="panel panel-default">
<div class="panel-heading clearfix">
<h4><strong> إضافة موظف</strong></h4>
</div>
<div class="panel-body">
<form class="form-inline" ng-submit="onSave()">
<div class="list-group">
<div class="list-group-item">
<label class="list-group-item-text bottom-up">الإسم:</label>
<input type="text" class="form-group form-control" name="name" size="40">
</div>
<div class="list-group-item">
<label class="list-group-item-text bottom-up">نوع التعيين:</label>
<select class="form-group form-control" name="employment_type">
<option value="معين">معين</option>
<option value="متعاون">متعاون</option>
</select>
<label class="list-group-item-text bottom-up">الحالة الإجتماعية:</label>
<select class="form-control" name="maritial_status">
<option value="متزوج">متزوج</option>
<option value="اعزب">اعزب</option>
<option value="مطلق">مطلق</option>
<option value="ارمل">ارمل</option>
</select>
<label class="list-group-item-text bottom-up">الوظيفة:</label>
<select class="form-control" name="job">
<option *ngFor="let job of jobs" value="{{job.value}}">{{job.name}}</option>
</select>
</div>
<div class="list-group-item">
<label class="list-group-item-text bottom-up">المؤهل:</label>
<input name="qualification" class="form-control" type="text">
<label class="list-group-item-text bottom-up">المؤهل الإضافي:</label>
<input name="extra_qualification" class="form-control" type="text">
</div>
<div class="list-group-item">
<label class="list-group-item-text bottom-up">العنوان:</label>
<input name="address" class="form-control" type="text">
<label class="list-group-item-text bottom-up">المحلية السابقة:</label>
<select class="form-control" name="previouse_mahaleyah">
<option *ngFor="let mahaleyah of mahalyas" value="{{mahaleyah.id}}">{{mahaleyah.name}}</option>
</select>
</div>
<div class="list-group-item">
<label class="list-group-item-text bottom-up">تاريخ النقل للمحلية:</label>
<input type="text" class="form-control" placeholder="mm/dd/yyyy" name="date_of_transfer_to_mahaleyah">
<label class="list-group-item-text bottom-up">الحالة الصحية:</label>
<input type="text" class="form-control" name="health_status">
</div>
<div class="list-group-item">
<label class="list-group-item-text bottom-up">عدد الأطفال:</label>
<input type="text" class="form-control" name="number_of_children">
<label class="list-group-item-text bottom-up">مكان عمل الزوج:</label>
<input type="text" class="form-control" name="spouse_work_place">
</div>
<div class="list-group-item">
<label class="list-group-item-text bottom-up">رقم الهاتف:</label>
<input type="text" class="form-control">
<label class="list-group-item-text bottom-up">الدورات: </label>
<select class="form-control" name="courses">
<option *ngFor="let course of courses" value="{{course.id}}">{{course.name}}</option>
</select>
</div>
<div class="list-group-item">
<label class="list-group-item-text bottom-up">حالة الوالدين:</label>
<textarea type="text" class="form-control" name="parent_status"></textarea>
<label class="list-group-item-text bottom-up">ملاحظات:</label>
<textarea type="text" class="form-control" name="note"></textarea>
</div>
</div>
<div class="new-employee-butons">
<input type="submit" class="btn btn-md btn-success" value="save" (click)="onSave()">
<button class="btn btn-md btn-danger ">
close
</button>
</div>
</form>
</div>
</div>
<!-- End of Pnel -->
</div>
</div>
</div>
data.service.ts:
import { Injectable, Input } from '@angular/core';
import { Http, Headers } from '@angular/http';
import { Kg } from '../kgs/kg';
import 'rxjs/add/operator/map';
@Injectable()
export class DataService {
baseUrl: string = 'http://localhost:8000/kgms/';
constructor(private http: Http) { }
/* Getters starts*/
public getAllEmployees(){
return this.http.get(this.baseUrl+'employees/')
.map(res => res.json());
}
public getAllKgs(){
return this.http.get(this.baseUrl+'kgs/')
.map(res => res.json());
}
public getAllStudents(){
return this.http.get(this.baseUrl+'students/')
.map(res => res.json());
}
public getAllAssessments(){
return this.http.get(this.baseUrl+'asses/')
.map(res => res.json());
}
public getAllMahaleyahs(){
return this.http.get(this.baseUrl+'mahaleyahs/')
.map(res => res.json());
}
public getAllCourses(){
return this.http.get(this.baseUrl+'courses/')
.map(res => res.json());
}
public getAllJobs(){
return this.http.get(this.baseUrl+'jobs/')
.map(res => res.json());
}
/* Getters Ends */
/* Setters starts */
saveEmployee(employee){
const headers = new Headers({'Content-type': 'application/json'});
return this.http.post('http://localhost:8000/kgms/', employee, {headers: headers});
}
public addKg(kg:Kg){
return this.http.put(this.baseUrl+'kgs/', kg, {
})
.map(res => res.json());
}
/* Setters Ends */
}
I appreciate any help and advice
