Show error message below input field

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>