我想在我的应用程序中使用角度4创建一个新用户。我使用表单添加一个新用户。我现在可以把他加不API现在我想使用的API,所以我想送这个形式APIpost form data angular 4
当点击进入所需的数据功能后可以节省形式:
employes: Employees[]=[
// new Employees('aya','test','[email protected]',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();
}
,这就是数据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>
我有一个错误:” t找到名字'mob',找不到名字'job', 找不到名字'email',找不到名字'isMember',找不到名字'isActive'
有什么帮助吗?
请添加您的表单提交方法的代码。 –
在此处添加您的html表单。它看起来像你的表单数据不会去你打电话给你的api –
错误是正确的,你有'暴徒'和'isMember'等等。你需要引用那些对象,但是你传递一个数组。我认为您需要暂时退出代码,因为storeEmployee并未遍历数组并存储每个员工。 – PeterS