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.
