使用iOS返回按鈕阻止表單提交

Question

我有一個Ionic 3應用程序，並且正在運行iOS ，我發現了一個錯誤，即使禁用了“提交”按鈕，該錯誤也允許用戶提交表單。 我嘗試過此鏈接 ，但是沒有運氣。

我有一個臨時修復程序，可以提醒用戶是否未填寫表單字段以防止意外提交，但這本身就是一個痛苦。

我只包括與.html文件中的Submit按鈕直接相關的.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> 

任何幫助表示贊賞。

Answer 1

意外提交是如何發生的？ 您是否單擊“禁用”按鈕才能看到這種情況？

如果您只是執行以下操作，而不是調用警報，該怎么辦：

submitBOL(form: NgForm){
    if(!this.checkstatusfinal()){
      return falase;
    }
}