Ionic 5: Form input is not validating in higher Android version but works with Android 9

I’m working on a project that validates the input before submitting the form. It’s working fine on lower android versions but when it’s executed on higher versions specifically Android 10 seems like it’s not getting retrieved.

Heres my ngModel:

addressData = {
        street_no: '',
        street_name: '',
        purok_no: '',
        barangay_no: 'NONE',
        city_mun: '',
        // barangay_name: '',
        barangay_name: {
            value: '',
            barangay_no: ''
        },
        landmark: '',
        mobile_no: '',
        alt_mobile: '',
    };

It is binded on a form like this one:

<form (ngSubmit)="createAddress()">
      <ion-row>
        <ion-col [size]="6">
          <div class="form-group">
            <ion-label position="stacked" class="form-group-label">STREET NO.</ion-label>
            <ion-input [ngModelOptions]="formConfig" [(ngModel)]="addressData.street_no" placeholder="(optional)" type="text" class="form-group-input"></ion-input>
          </div>
        </ion-col>
        <ion-col [size]="6">
          <div class="form-group">
            <ion-label position="stacked" class="form-group-label">STREET NAME.<ion-text color="danger">*</ion-text></ion-label>
            <ion-input [ngModelOptions]="formConfig" [(ngModel)]="addressData.street_name" required type="text" class="form-group-input"></ion-input>
          </div>
        </ion-col>

        <ion-col [size]="6">
          <div class="form-group">
            <ion-label position="stacked" class="form-group-label">PUROK NO.<ion-text color="danger">*</ion-text></ion-label>
            <ion-input [ngModelOptions]="formConfig" [(ngModel)]="addressData.purok_no" placeholder="(optional)" required type="text" class="form-group-input"></ion-input>
          </div>
        </ion-col>
        <ion-col [size]="6" style="display: none;">
          <div class="form-group">
            <ion-label position="stacked" class="form-group-label">BARANGAY NO.<ion-text color="danger">*</ion-text></ion-label>
            <ion-input style="border: none; --padding-start: 0" [ngModelOptions]="formConfig"  [(ngModel)]="addressData.barangay_no" required type="text" class="form-group-input" [disabled]="true"></ion-input>
          </div>
        </ion-col>

        <ion-col [size]="6">
          <div class="form-group">
            <ion-label position="stacked" ngClass="form-group-label">CITY/MUNICIPALITY<ion-text color="danger">*</ion-text></ion-label>
            <ion-select (click)="setEditCity()" (ionChange)="cityValueChanged($event)" [ngModelOptions]="formConfig" [(ngModel)]="addressData.city_mun" class="form-group-select" ok-text="Confirm" cancel-text="Cancel">
              <ion-select-option *ngIf="edit_mode == 1 && !changeCity" [value]="addressData.city_mun">{{addressData.city_mun}}</ion-select-option>
              <ion-select-option *ngFor="let city of cities" [value]="city.name">{{city.name}}</ion-select-option>
            </ion-select>
          </div>
        </ion-col>
        ...
<ion-row>

Here’s my script:

 if (this.addressData.street_name === '' || this.addressData.barangay_no === '' || this.addressData.city_mun === '' ||
            this.addressData.barangay_name.value === '' || this.addressData.landmark === '' || this.addressData.mobile_no === '' ||
            this.addressData.alt_mobile === '') {
            console.log(this.addressData);
            this.cmpt.showToast('Please fill-in the required fields.', 2000, 'warning').then((alert) => alert.present());
        } else if (this.addressData.mobile_no.includes('_') || this.addressData.alt_mobile.includes('_')) {
            this.cmpt.showToast('Please provide a valid mobile number.', 2000, 'warning').then((alert) => alert.present());
        } else {
        // submit form code
        }
}

The items are already filled/completed but it always returns Please fill-in the required fields.. It’s working fine in android 9 but seems like there’s an error in android 10. Is it possible that it’s because of android version?

1 post - 1 participant

Read full topic