我有一个 Ionic 3
应用程序并运行 iOS
,我发现了一个允许用户提交表单的错误,即使提交按钮被禁用也是如此。我试过按照这个link ,但没有运气。
我有一个临时修复程序,可以在表单字段未填写时提醒用户以防止意外提交,但这本身就是一种痛苦。
我只在 .html 文件中包含与提交按钮直接相关的 .ts 文件的方法。
// Adds chemicals to main BOL form
addChemical(){
const modal = this.modalCtrl.create(AddChemicalPage);
modal.present();//presents the signature modal
modal.onDidDismiss((returnParam: any) => {
if(returnParam!=true){
this.canSubmit = true;
this.chemInfo.push(returnParam);
/* Service that holds the list of chemicals user will be using **/
this.reap.bolGlobalChemicals = this.chemInfo;
}
else{
//console.log('backed out of no chemical!');
}
});
}
destinationChange(e) {
if(e.value == ""){
this.destinationCitybol = false;
}else{
this.destinationCitybol = true;
}
}
yardChange(event: { component: SelectSearchableComponent, value: any }) {
if(this.Shipper == null){
this.Shipperbol = false;
}else{
this.Shipperbol = true;
}
}
checkstatusfinal(){
if (this.Shipperbol && this.chemInfo.length != 0 && this.destinationCitybol){
return true
}
else{
return false
}
}
submitBOL(form: NgForm){
//This is a temporary workaround
var isFormFilled = this.checkstatusfinal();
if(!isFormFilled){
this.reap.presentAlert('Cannot Submit BOL','Please make sure the Shipper, Destination City, and at least 1 chemical is filled out before submitting,','Dismiss');
return;
}
}
<ion-content>
<form #form="ngForm" (ngSubmit)="submitBOL(form)" novalidate>
<ion-item class="formField ionField">
<ion-label stacked>Date</ion-label>
<ion-datetime [(ngModel)]="currentDate" displayFormat="MM/DD/YYYY" pickerFormat="MM/DD/YYYY" name="date" type="date" required></ion-datetime>
</ion-item>
<!-- data thrown into dropdown from API -->
<ion-item>
<ion-label stacked>Shipper</ion-label>
<select-searchable
[(ngModel)]="Shipper"
item-content
ngModel
title="Yard"
itemValueField=ID
itemTextField=Name
name="Shipper"
[items]="yardsArray"
[canSearch]="true"
[canClear]="true"
(onChange)="yardChange($event)"
>
</select-searchable>
</ion-item>
<!-- autofilled by API based on user login-->
<ion-item class="formField ionField">
<ion-label stacked>Ship To/Driver</ion-label>
<ion-input type="text" [(ngModel)]="driver" name="driver" value="{{this.driver}}" [disabled]="personnelArray"></ion-input>
</ion-item>
<ion-item class="formField ionField">
<ion-label stacked>Destination City</ion-label>
<ion-input type="text" [(ngModel)]="destinationCity" name="destinationCity" (ionChange)="destinationChange($event)" required ></ion-input>
</ion-item>
<!-- data thrown into dropdown from API -->
<ion-item>
<ion-label stacked>Trailer</ion-label>
<select-searchable
item-content
[(ngModel)]="Trailer"
title="Trailer"
itemValueField=ID
itemTextField=Number
name="Trailer"
[items]="trailersArray"
[canSearch]="true"
[canClear]="true"
(onChange)="trailerChange($event)">
</select-searchable>
</ion-item>
<!-- data thrown into dropdown from API -->
<ion-item>
<ion-label stacked>Truck</ion-label>
<select-searchable
item-content
[(ngModel)]= "Truck"
title="Truck"
itemValueField=ID
itemTextField=Vehicle
name="Truck"
[items]="trucksArray"
[canSearch]="true"
[canClear]="true"
(onChange)="truckChange($event)">
</select-searchable>
</ion-item>
<!-- autofilled by sub form data-->
<ion-label stacked>Chemical Requests</ion-label>
<ion-grid *ngFor="let chem of chemInfo; let i = index">
<div class="custChemicals">
<ion-row>
<ion-col>Type of Package:</ion-col>
<ion-col>{{chem.Container?.Type}}</ion-col>
</ion-row>
<ion-row>
<ion-col>Stock Name:</ion-col>
<ion-col>{{chem.Product?.StockName}}</ion-col>
</ion-row>
<ion-row>
<ion-col>Number of Packages:</ion-col>
<ion-col>{{chem.noPackages}}</ion-col>
</ion-row>
<ion-row>
<ion-col> Gallons Out:</ion-col>
<ion-col>{{chem.Gallons}}</ion-col>
</ion-row>
<ion-row>
<ion-col class="center"><button (tap)="removeChemical(i)"ion-button class="trashButton"><ion-icon name="trash" ios="ios-trash" md="md-trash"></ion-icon></button></ion-col>
</ion-row>
</div>
</ion-grid>
<ion-grid>
<ion-row>
<ion-col col-6 offset-3 text-center>
<button id="chemicalButton" type="button" (tap)="addChemical()" [disabled]="!checkstatus()" ion-button icon-only clear large><ion-icon name="add-circle"></ion-icon></button>
</ion-col>
</ion-row>
</ion-grid>
<button id="submitButton" ion-button type="submit" block large [disabled]="!checkstatusfinal()">Submit</button>
</form>
</ion-content>
感谢任何帮助。
最佳答案
意外提交是如何发生的?您是否单击禁用按钮以查看发生的情况?
如果您不调用警报,而是简单地执行以下操作会怎样:
submitBOL(form: NgForm){
if(!this.checkstatusfinal()){
return falase;
}
}
关于javascript - 防止使用 iOS 返回按钮提交表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57294589/