Ionic 4 ion-datetime 浮动标签即使没有值也总是浮动答案

【问题标题】：Ionic 4 ion-datetime floating label always floats even without a valueIonic 4 ion-datetime 浮动标签即使没有值也总是浮动
【发布时间】：2019-07-10 23:34:24
【问题描述】：

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>

输出

【问题讨论】：

标签： javascript css angular ionic-framework ionic4

【解决方案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>

【讨论】：