Ionic 3 Double blur to display correct validation on inputs

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>