Ionic 3 Double blur to display correct validation on inputs

Ionic Framework ionic-v3
1

Hi, I have very basic web forms and for some reason they are forcing me to blur twice before they display/update the validation colors of the input (e.g. red/green border that comes OOTB with Ionic). I’ll include some of my html below to see if you guys think something is out of place?

<form [formGroup]="stepOneForm" text-left (ngSubmit)="next()">
<ion-list>
        <ion-item>
          <ion-label floating>
            First Name
          </ion-label>
          <ion-input type="text" formControlName="FirstName">
          </ion-input>
        </ion-item>
        <ion-item *ngIf="!stepOneForm.controls['FirstName'].valid && stepOneForm.controls['FirstName'].touched">
          <p ion-text color="danger">Invalid First Name</p>
        </ion-item>
        <ion-item>
          <ion-label floating>
            Last Name
          </ion-label>
          <ion-input type="text" formControlName="LastName">
          </ion-input>
        </ion-item>
        <ion-item *ngIf="!stepOneForm.controls['LastName'].valid && stepOneForm.controls['LastName'].touched">
          <p ion-text color="danger">Invalid Last Name</p>
        </ion-item>
</ion-list>
</form>
2

image

Here is a screenshot to show that the form validation has clearly updated to show that Invalid First Name correctly, but still thinks the input is valid.

3

It happens to me too, I would think it’s a bug in the ion-item or ion-input component