Ionic 4 ion-datetime плавающая метка всегда плавает даже без значения

Question

Ionic 4, метка всегда плавает в поле ион-дата / время, когда нет значения, как указано ниже.

Мой код

<form [formGroup]="statusHandlerForm">
    <ion-item class="input-container " align-items-center no-padding>
      <ion-label position="floating" no-margin no-padding>Date of Loss</ion-label>
      <ion-datetime no-padding formControlName="dateOfLoss" display-format="MMM DD, YYYY"></ion-datetime>
      <ion-icon src="/assets/icon/calendar.svg" color="primary" slot="end"></ion-icon>
    </ion-item>
</form>

Выход

Answer 1

Мне удалось исправить это частично , динамически установив атрибут position:

<ion-label [position]="statusHandlerForm.controls.dateOfLoss.value ? 'floating' : null">Date of Loss</ion-label>

При этом метка отобразится как заполнитель и переместится в плавающую позицию, как только поле получит значение.

Однако анимация между этими двумя состояниями отличается от обычной анимации для плавающих меток.

Надеюсь, это поможет!

Полный пример на основе вашего кода:

<form [formGroup]="statusHandlerForm">
    <ion-item class="input-container " align-items-center no-padding>
      <ion-label [position]="statusHandlerForm.controls.dateOfLoss.value ? 'floating' : null" no-margin no-padding>Date of Loss</ion-label>
      <ion-datetime no-padding formControlName="dateOfLoss" display-format="MMM DD, YYYY"></ion-datetime>
      <ion-icon src="/assets/icon/calendar.svg" color="primary" slot="end"></ion-icon>
    </ion-item>
</form>