Ionic 4 Reactive Form Validation mobile app different to web

Ionic Framework ionic-v3
1

I have Reactive Form Validation working in an angular application. I have replicated this code as similarly as possible in my ionic app and it works fine when running in the browser (ionic serve).

However when I run the same code on as a mobile app (Android or iOS) it does not update the validation messages. How can I get the messages showing once the user leaves the input (touched) or after submitting the form and failing validation.

It knows the form is not valid once I submit it just just not show the messages. It is also not a styling issue as they display if I remove all the conditional logic.

Code (works in browser):

<form [formGroup]="loginForm" (ngSubmit)="onSubmit()" #formCtrl="ngForm">
      <ion-grid>
        <ion-row class="row-padding-one"></ion-row>
        <ion-row>
          <ion-col size-sm="6" offset-sm="3" class="input-col">
            <ion-item class="custom-item" lines="none">
              <ion-input 
                class="login-input"
                formControlName="email"
                placeholder="E-Mail"
                required>
              </ion-input>
              <div *ngFor="let validation of loginValidationMessages.email">
                <div class="error-message"
                 *ngIf="loginForm.get('email').hasError(validation.type) && ((loginForm.get('email').dirty || loginForm.get('email').touched) || formCtrl.submitted)">
                  {{validation.message}}</div>
              </div>
            </ion-item>
...
           <ion-button
              class="btn-login"
              type="submit"
              color="primary"
              expand="block">Login
            </ion-button>
...
 </form>

Full question here: