使用 iOS 返回按钮阻止表单提交

Question

我有一个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>

感谢任何帮助。

Answer 1

意外提交是如何发生的？您是否单击禁用按钮来查看这种情况？

如果您不调用警报，而是执行以下操作会怎样：

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