I tried a lot of ways to place the error message below the input field.
<ion-item lines="none">
<!-- <div floating> -->
<ion-input type="text" placeholder="Profile Name" [readonly]="isReadOnly" ngModel name="profile"
#nameCtrl="ngModel" required minlength="2" pattern="^[A-Za-zÀ-ÿ ,.'-]+$" (focusout)="out_profile()" #name>
</ion-input>
<!-- </div> -->
<ion-item *ngIf="nameCtrl.invalid && nameCtrl.touched" lines="none" class="msg" slot="start" no-padding>
<ion-text *ngIf="nameCtrl.errors['required']">
Name is required.
</ion-text>
<ion-text *ngIf="nameCtrl.errors['minlength']">
Name must be at least 3 characters long.
</ion-text>
<ion-text *ngIf="nameCtrl.errors['pattern']">
Invalid Name
</ion-text>
</ion-item>