javascript - Ionic 4 ion-datetime float 标签即使没有值也始终 float

Question

Ionic 4，当没有值时，label 始终 float 在 ion-datetime 字段上，如下所示。

我的代码

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

这会将标签显示为占位符，并在字段获得值后立即将其移动到 float 位置。

但是，这两种状态之间的动画不同于 float 标签的常规动画。

希望这对您有所帮助!

基于您的代码的完整示例:

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