[英]Passing data from Angular 8 app to Laravel backend for editing purpose
我正在使用前端的Angular 8和后端的Laravel構建的CRUD應用程序。 前端是SPA,CRUD應用程序的“更新”功能正在捕獲編輯表單上的更新數據,然后通過服務將其解析到后端。
問題是更新表格上的數據后,當我在Laravel中的后端控制器上轉儲時,我得到空值。 我在后端使用put方法
Edit.component.html,我在其中更新通過ngModel在每個輸入字段上動態填充的數據
<form #editForm=ngForm (ngSubmit)="onSubmit()">
<div class="card-header childheader">Update Details</div>
<div class="card-body">
<div class="form-group row">
<div class="col-sm-12">
<label for="childFirstName">Child Name</label>
<input
type="text"
name="childName"
class="form-control"
[ngModel]="singleUser?.name"
id="childName"
placeholder="Child FirstName">
</div>
</div>
<div class="form-group row">
<div class="col-sm-6">
<label for="childAge">Child Age</label>
<select
class="form-control"
id="chAge"
name="childAge"
[ngModel]="singleUser?.age"
required>
<option value="" selected disabled> Child's Age</option>
<option value="1"> 1 </option>
<option value="2"> 2 </option>
<option value="3"> 3 </option>
</select>
</div>
<div class="col-sm-6">
<label for="childGender">Child Gender</label>
<select
class="form-control"
id="childGender"
name="childGender"
[ngModel]="singleUser?.gender"
required>
<option value="" style="display:none"> Child's Gender</option>
<option value="Male"> Male</option>
<option value="Female"> Female </option>
</select>
</div>
</div>
<div class="form-group row">
<div class="col-sm-12">
<button
type="submit"
class="btn btn-lg btn-success btn-block"
[disabled]="!editForm.valid">Update Details </button>
</div>
</div>
</div>
</form>
Edit.component.ts文件
import { Component, OnInit } from '@angular/core';
import { SharedService } from 'src/app/Services/shared.service';
import { AuthService } from 'src/app/Services/auth.service';
@Component({
selector: 'app-edit',
templateUrl: './edit.component.html',
styleUrls: ['./edit.component.css']
})
export class EditComponent implements OnInit {
public singleUser : any[];
public error = null;
public form = {
childName: null,
childAge: null,
childGender: null
};
constructor(
private Shared : SharedService,
private Auth:AuthService,
) { }
//Pass the data to the backend via a common service
onSubmit(){
this.Auth.editedData(this.form).subscribe(
data => console.log(data),
error => console.log(error)
);
}
ngOnInit() {
//Pass the data to be edited to the view
this.Shared.edit$.subscribe(message => this.singleUser = message);
}
}
驗證服務
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class AuthService {
private baseUrl = 'http://localhost/Laravel-anngular-spa/backend/public/api';
constructor(private http:HttpClient) {}
//Pass data to the backend
editedData(data:any){
return this.http.post(`${this.baseUrl}/editedData` , data);
}
}
Laravel后端路線
Route::put('editedData', 'SubmitFormController@updateData');
Laravel控制器
public function updateData(Request $request){
dd($request->all());
}
如果要獲取表單數據,則需要這樣做。
首先在模板中用ngForm注冊變量,然后在ngsubmit中傳遞數據
<form (ngSubmit)="onSubmit(registerForm)" #registerForm="ngForm">
<div class="form-group">
<label for="UserName">Your email</label>
<input
type="text"
ngModel
class="form-control"
id="UserName"
name="UserName"
required
/>
<div
*ngIf="
registerForm.controls.UserName?.errors?.required &&
registerForm.controls.UserName?.touched
"
class="alert alert-danger"
>
Email is required
</div>
</div>
<div class="form-group">
<label for="password">Your password</label>
<input
type="password"
ngModel
class="form-control"
id="Password"
name="Password"
required
/>
<div
*ngIf="
registerForm.controls.Password?.errors?.required &&
registerForm.controls.Password?.touched
"
class="alert alert-danger"
>
Password is required
</div>
</div>
<button
type="submit"
class="btn btn-success"
[disabled]="!registerForm.form.valid"
>
Submit
</button>
</form>
然后在組件中訪問值使用formValue.value.something
完整代碼
onSubmit(formValue: NgForm) {
const registerModel: AccountModel = {
UserName: formValue.value.UserName,
Password: formValue.value.Password
};
return this.authService
.register(registerModel)
.subscribe(
res => this.toastr.success("Create account success"),
error => this.toastr.error("Something went wrong")
);
}
由於您將singleUser
用作表單值的[(NgModel)]
(雙向綁定),因此數據將呈現到singleUser
。 但是您正在嘗試在html表單中的任何地方都不使用的表單。
使用this.form
而不是singleUser
您將能夠更新表數據。
component.html
<form #editForm=ngForm (ngSubmit)="onSubmit()">
<div class="card-header childheader">Update Details</div>
<div class="card-body">
<div class="form-group row">
<div class="col-sm-12">
<label for="childFirstName">Child Name</label>
<input
type="text"
name="childName"
class="form-control"
[ngModel]="form?.name"
id="childName"
placeholder="Child FirstName">
</div>
</div>
<div class="form-group row">
<div class="col-sm-6">
<label for="childAge">Child Age</label>
<select
class="form-control"
id="chAge"
name="childAge"
[ngModel]="form?.age"
required>
<option value="" selected disabled> Child's Age</option>
<option value="1"> 1 </option>
<option value="2"> 2 </option>
<option value="3"> 3 </option>
</select>
</div>
<div class="col-sm-6">
<label for="childGender">Child Gender</label>
<select
class="form-control"
id="childGender"
name="childGender"
[ngModel]="form?.gender"
required>
<option value="" style="display:none"> Child's Gender</option>
<option value="Male"> Male</option>
<option value="Female"> Female </option>
</select>
</div>
</div>
<div class="form-group row">
<div class="col-sm-12">
<button
type="submit"
class="btn btn-lg btn-success btn-block"
[disabled]="!editForm.valid">Update Details </button>
</div>
</div>
</div>
</form>
我希望這有幫助.. :)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.