angular - Angular - 保存提交按钮未保存到数据库中
问题描述
我正在为应用程序使用 Angular 7 和 Laravel 5.8。Laravel 作为后端,Angular 作为前端。当我单击 Angular 中的提交按钮时,没有任何反应。
我试图安慰它,但什么也没找到。我在 POSTMAN 中对其进行了测试,一切正常。
Laravel 后端
public function returnResponse($success, $data, $errorCode = 0, $message = false) {
$response = array();
$response['success'] = $success;
$response['message'] = isset($message) ? $message : '';
if ($errorCode) {
$response['errorCode'] = isset($errorCode) ? $errorCode : 0;
}
$response['data'] = $data;
return response()->json($response, 200);
}
public function createClientQuote(Request $request) {
$validator = Validator::make($request->all(), [
'client_name' => 'required',
'email' => 'required',
'phone' => 'required',
'business_name' => 'required',
'truck_required' => 'required',
'quote_origin' => 'required',
'quote_destination' => 'required',
'commodity' => 'required',
'weight' => 'required',
'loading_date' => 'required',
]);
if ($validator->fails()) {
return $this->returnResponse(false, ['error' => $validator->errors()], 1, 'Invalid Quote Data');
}
$input = $request->all();
$success = array();
$clientquote = new ClientQuote;
$mainData = array();
$mainData['to'] = $input['email'];
$mainData['from'] = "noblemfd@gmail.com";
$mainData['subject'] = "Quote";
$mainData['content'] = "You have successfully sent a Quote, we will get back to you. Thanks";
$this->mailSend($mainData);
$clientquote->client_name = $input['client_name'];
$clientquote->client_name = $input['email'];
$clientquote->client_name = $input['phone'];
$clientquote->client_name = $input['business_name'];
$clientquote->client_name = $input['truck_required'];
$clientquote->client_name = $input['quote_destination'];
$clientquote->client_name = $input['commodity'];
$clientquote->client_name = $input['weight'];
$clientquote->client_name = $input['loading_date'];
$clientquote->save();
return $this->returnResponse(true, array(), 0, 'Client added successfully.');
}
角 - 客户端报价.service.ts
createClientQuote(data: any) {
return this.http.post(environment.apiUrl + '/createClientQuote', data);
}
客户端-quote.component.ts
export class ClientQuoteLandingComponent implements OnInit {
quoteModel: any = {};
constructor(
private clientQuoteService: ClientQuoteService, private toastr: ToastrService,
private router: Router,
@Inject(LOCALE_ID) private locale: string,
private route: ActivatedRoute
) {
}
ngOnInit() {
}
onCreateQuote(quoteform: any) {
if (!quoteform.valid) { // return false if form not valid
return false;
}
this.clientQuoteService.createClientQuote(this.quoteModel)
.pipe(first())
.subscribe(
response => {
if (!response['success']) {
this.toastr.error(response['message']);
return false;
}
this.toastr.success(response['message']);
quoteform.reset();
quoteform.resetForm();
},
error => {
this.toastr.error(error);
}
);
}
numberOnly(event): boolean {
const charCode = (event.which) ? event.which : event.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;
}
}
客户端-quote.component.html
<form class="frmcreatequote" name="createquote" #quoteform="ngForm" (ngSubmit)="onCreateQuote(quoteform);" novalidate>
<aw-wizard #wizard [navBarLayout]="'large-empty-symbols'">
<aw-wizard-step [stepTitle]="'Personal Details'" [navigationSymbol]="{ symbol: '', fontFamily: 'FontAwesome' }">
<div class="centered-content">
<div class="row">
<div class="col-xs-12">
<div class="col-xs-6">
<label for="client_name">Full Name</label>
<input type="text" class="form-control" id="client_name" placeholder="Full Name" name="client_name" [(ngModel)]="quoteModel.client_name" #client_name="ngModel" [ngClass]="{'is-invalid' : client_name.invalid && ((client_name.dirty || client_name.touched) || quoteform.submitted)}" required>
<div class="form-feedback" *ngIf="client_name.invalid && ((client_name.dirty || client_name.touched) || quoteform.submitted)" class="invalid-feedback">
<div style="color:red;" *ngIf="client_name.errors?.required" class="alert alert-danger">Full Name is required.</div>
</div>
</div>
<div class="col-xs-6">
<label for="business_name">Business Name</label>
<input type="text" class="form-control" id="business_name" placeholder="Business Name" name="business_name" [(ngModel)]="quoteModel.business_name" #business_name="ngModel" [ngClass]="{'is-invalid' : business_name.invalid && ((business_name.dirty || business_name.touched) || quoteform.submitted)}" required>
<div class="form-feedback" *ngIf="business_name.invalid && ((business_name.dirty || business_name.touched) || quoteform.submitted)" class="invalid-feedback">
<div style="color:red;" *ngIf="business_name.errors?.required"class="alert alert-danger">Business Name is required.</div>
</div>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-12">
<div class="col-xs-6">
<label for="phone">Phone</label>
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-phone"></i>
</div>
<input type="text" class="form-control" data-inputmask='"mask": "(999) 999-9999"' data-mask id="phone" name="phone" [(ngModel)]="quoteModel.phone" #phone="ngModel" [ngClass]="{'is-invalid' : phone.invalid && ((phone.dirty || phone.touched) || quoteform.submitted)}" required >
</div>
<div class="form-feedback" *ngIf="phone.invalid && ((phone.dirty || phone.touched) || quoteform.submitted)" class="invalid-feedback">
<!-- <div style="color:red;" *ngIf="phone.errors?.required" class="alert alert-danger">Phone Number is required.</div> -->
<!-- <div style="color:red;" *ngIf="email.errors?.email">Email must be a valid email address</div> -->
</div>
</div>
<div class="col-xs-6">
<label for="email">Email</label>
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-envelope"></i>
</div>
<!-- <input class="form-control" placeholder="example@email.com" type="email" > -->
<input type="email" class="form-control" id="email" placeholder="Email" name="email" [(ngModel)]="quoteModel.email" #email="ngModel" [ngClass]="{'is-invalid' : email.invalid && ((email.dirty || email.touched) || quoteform.submitted)}" required>
</div>
<div class="form-feedback" *ngIf="email.invalid && ((email.dirty || email.touched) || quoteform.submitted)" class="invalid-feedback">
<div style="color:red;" *ngIf="email.errors?.required" class="alert alert-danger">Email is required.</div>
<div style="color:red;" *ngIf="email.errors?.email">Email must be a valid email address</div>
</div>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-12">
<div class="col-xs-12">
<label for="address">Address</label>
<!-- <input class="form-control" placeholder="Address" type="text" ngx-google-place (onSelect)="onAddressChange($event)"> -->
<!-- <input class="form-control" placeholder="Address" type="text" ngx-google-places-autocomplete [options]='options' #placesRef="ngx-places" (onAddressChange)="handleAddressChange($event)"/> -->
<input class="form-control" placeholder="address" type="text" id="address" name="address" [(ngModel)]="quoteModel.address" #address="ngModel" >
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-12">
<div class="col-xs-12">
<div class="btn-group">
<button type="button" class="btn btn-primary" awNextStep> Next ></button>
</div>
</div>
</div>
</div>
</div>
</aw-wizard-step>
<aw-wizard-step [stepTitle]="'Transaction Details'" [navigationSymbol]="{ symbol: '', fontFamily: 'FontAwesome' }">
<div class="centered-content">
<div class="row">
<div class="col-xs-12">
<div class="col-xs-6">
<label for="quote_origin">Origin</label>
<input type="text" class="form-control" id="quote_origin" placeholder="Origin" name="quote_origin" [(ngModel)]="quoteModel.quote_origin" #quote_origin="ngModel" [ngClass]="{'is-invalid' : quote_origin.invalid && ((quote_origin.dirty || quote_origin.touched) || quoteform.submitted)}" required>
<div class="form-feedback" *ngIf="quote_origin.invalid && ((quote_origin.dirty || quote_origin.touched) || quoteform.submitted)" class="invalid-feedback">
<div style="color:red;" *ngIf="quote_origin.errors?.required"class="alert alert-danger">Origin is required.</div>
</div>
</div>
<div class="col-xs-6">
<label for="quote_destination">Destination</label>
<input type="text" class="form-control" id="quote_destination" placeholder="Destination" name="quote_destination" [(ngModel)]="quoteModel.quote_destination" #quote_destination="ngModel" [ngClass]="{'is-invalid' : quote_destination.invalid && ((quote_destination.dirty || quote_destination.touched) || quoteform.submitted)}" required>
<div class="form-feedback" *ngIf="quote_destination.invalid && ((quote_destination.dirty || quote_destination.touched) || quoteform.submitted)" class="invalid-feedback">
<div style="color:red;" *ngIf="quote_destination.errors?.required"class="alert alert-danger">Destination is required.</div>
</div>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-12">
<div class="col-xs-6">
<label for="commodity">Commodity</label>
<input type="text" class="form-control" id="commodity" placeholder="Commodity" name="commodity" [(ngModel)]="quoteModel.commodity" #commodity="ngModel" [ngClass]="{'is-invalid' : commodity.invalid && ((commodity.dirty || commodity.touched) || quoteform.submitted)}" required>
<div class="form-feedback" *ngIf="commodity.invalid && ((commodity.dirty || commodity.touched) || quoteform.submitted)" class="invalid-feedback">
<div style="color:red;" *ngIf="commodity.errors?.required"class="alert alert-danger">Commodity is required.</div>
</div>
</div>
<div class="col-xs-6">
<label for="truck_required">Required Truck(s)</label>
<input type="text" (keypress)="numberOnly($event)" class="form-control" id="truck_required" placeholder="1,2,3..." name="truck_required" [(ngModel)]="quoteModel.truck_required" #truck_required="ngModel" [ngClass]="{'is-invalid' : truck_required.invalid && ((truck_required.dirty || truck_required.touched) || quoteform.submitted)}" required>
<div class="form-feedback" *ngIf="truck_required.invalid && ((truck_required.dirty || truck_required.touched) || quoteform.submitted)" class="invalid-feedback">
<div style="color:red;" *ngIf="truck_required.errors?.required"class="alert alert-danger">Required Truck(s) is required.</div>
</div>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-12">
<div class="col-xs-6">
<label for="weight">Weight (in KG)</label>
<input type="text" class="form-control" id="weight" placeholder="1000,2500,3100..." name="weight" [(ngModel)]="quoteModel.weight" #weight="ngModel" [ngClass]="{'is-invalid' : weight.invalid && ((weight.dirty || weight.touched) || quoteform.submitted)}" required>
<div class="form-feedback" *ngIf="weight.invalid && ((weight.dirty || weight.touched) || quoteform.submitted)" class="invalid-feedback">
<div style="color:red;" *ngIf="weight.errors?.required"class="alert alert-danger">Commodity Weight is required.</div>
</div>
</div>
<div class="col-xs-6">
<label for="loading_date">Loading Date</label>
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control pull-right" id="datepicker">
</div>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-12">
<div class="col-xs-12">
<label for="comment">Comment</label>
<input class="form-control" placeholder="Comment" type="text" id="comment" name="comment" [(ngModel)]="quoteModel.comment" #comment="ngModel" >
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-12">
<div class="col-xs-12">
<div class="btn-group">
<button style="margin:5px" type="button" class="btn btn-warning" awPreviousStep> < Previous</button>
<button style="margin:5px" type="button" class="btn btn-primary" awNextStep> Next ></button>
</div>
</div>
</div>
</div>
</div>
</aw-wizard-step>
<aw-wizard-step [stepTitle]="'Complete'" [navigationSymbol]="{ symbol: '', fontFamily: 'FontAwesome' }">
<div class="centered-content">
<div>
Content: Step 3
</div>
<br>
<div class="row">
<div class="col-xs-12">
<div class="col-xs-12">
<div class="btn-group">
<button style="margin:5px" type="button" class="btn btn-warning" awPreviousStep>< Previous</button>
<button type="submit" class="btn btn-success" > Send Quote</button>
</div>
</div>
</div>
</div>
</div>
</aw-wizard-step>
</aw-wizard>
</form>
<button type="submit" class="btn btn-success" > Send Quote</button>
当我单击提交按钮时,我希望它会保存到数据库中,但没有任何反应。我该如何解决这个问题?
解决方案
推荐阅读
- powershell - Powershell中的高级CSV过滤?
- reactjs - MUI:如何以编程方式更新 DataGrid 状态?
- php - Laravel Sail:在 docker 容器中运行 Mysql PHP 迁移
- python - 在 Django ORM 中按查询分组
- amazon-web-services - 使用亚马逊网络服务身份验证时出现“无法解析模块,这些文件都不存在错误”
- python - 数据框与自身的相关性
- r - 用于分配 R
- node.js - 验证失败导致崩溃后,在尝试发送另一个(正确)请求之前,需要刷新应用程序
- python - 我的 pygame 菜单不工作,也没有显示在屏幕上
- liferay - Liferay 获取组织角色的所有用户(按组织角色名称)