Javascript 离子4离子日期时间浮动标签始终浮动，即使没有值

离子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>

损失日期

输出

我通过动态设置

位置

属性，部分解决了这个问题：

<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>

损失日期