Prevent form submission with iOS return button

Question

I have an Ionic 3 application and running iOS , I found a bug that allows the user to submit a form even if the submit button is disabled. I've tried following this link , but no luck.

I have a temporary fix to alert user if the form fields are not filled out to prevent accidental submission, but it is a pain in itself.

I am only including the methods of the .ts file that are directly related to the submit button in the .html file.

The Screenshot shows the alert for submitting the form, but the button is still disabled.

 // 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> 

Any help is appreciated.

Answer 1

How does accidental submission take place? Do you click on disabled button to see that happen?

What if instead of invoking an alert, you simply did:

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