角度4を使用してアプリケーションで新しいユーザーを作成したいと思います。フォームを使用して新しいユーザーを追加します。私は今、私はAPIにこのフォームを送信するように、APIを使用したいAPIなくて、今、彼を追加することができますフォームデータの後ろに角度をつける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>
:することができます」 名前 'isMember'を見つけることができません、名前 'isActive'を見つけることができません。
ヘルプがありますか?
フォームがメソッドのコードを提出追加してください。 –
ここにhtmlフォームを追加してください。あなたのフォームデータがあなたのapiを呼び出しているサービスに行くのではないようです –
エラーは正しいです、あなたは 'mob'と 'isMember'などです。オブジェクトを参照する必要があります。 。 storeEmployeeが配列を反復処理せず、各従業員を格納していないので、コードからすぐに戻る必要があると思います。 – PeterS