Angular 角度-保存提交按钮未保存到数据库中
我使用Angular 7和Laravel 5.8作为应用程序。Laravel作为后端，Angular作为前端。当我在Angular中单击submit按钮时，什么也没有发生 我试图安慰它，但什么也没找到。我在邮递员那里测试过，一切正常 拉维后端Angular 角度-保存提交按钮未保存到数据库中,angular,api,Angular,Api,我使用Angular 7和Laravel 5.8作为应用程序。Laravel作为后端，Angular作为前端。当我在Angular中单击submit按钮时，什么也没有发生 我试图安慰它，但什么也没找到。我在邮递员那里测试过，一切正常 拉维后端 public function returnResponse($success, $data, $errorCode = 0, $message = false) { $response = array(); $re
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.');
}
createClientQuote(data: any) {
return this.http.post(environment.apiUrl + '/createClientQuote', data);
}
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;
}
}
导出类ClientQuoteLandingComponent实现OnInit{
quoteModel:any={}；
建造师(
private clientQuoteService:clientQuoteService，private-toastr:ToastrService，
专用路由器：路由器，
@Inject（LOCALE_ID）private LOCALE:string，
专用路由：ActivatedRoute
) {
}
恩戈尼尼特（）{
}
onCreateQuote（quoteform:any）{
如果（！quoteform.valid）{//如果表单无效，则返回false
返回false；
}
this.clientQuoteService.createClientQuote（this.quoteModel）
.pipe（第一个（））
.订阅(
响应=>{
如果（！响应['success']）{
此.toastr.error（响应['message']）；
返回false；
}
this.toastr.success（响应['message']）；
quoteform.reset（）；
quoteform.resetForm（）；
},
错误=>{
此.toastr.error（错误）；
}
);
}
numberOnly（事件）：布尔值{
const charCode=（event.which）？event.which:event.keyCode；
如果（字符码>31&（字符码<48 | |字符码>57））{
返回false；
}
返回true；
}
}
<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>