小数管道在页面加载时不起作用

Question

我试图创建一个 input[number] 字段作为输入时间字段。

我正在使用十进制管道 (number:'2.0-0') 和一些 javascript (if(parseInt(this.value,10)>23)this.value=23;) 将输入数字格式化为时间格式。

输入功能工作正常。当我输入数字时，它们被转换为时间格式。

例如，

0 -> 00
9 -> 09
99 -> 23 // For hour field
99 -> 59 // For minute field

我的问题是页面加载时保存的数据没有格式化数字。即 9 在页面加载时保持 9 而不是 09。

部分代码如下。

<div class="col-md-2" style="padding-right: 0px">
    <input type="number" class="form-control" placeholder="HH" [(ngModel)]="item.startHour"
           onchange="if(parseInt(this.value,10)>23)this.value=23;"
           name="startHour" value="{{item.startHour | number:'2.0-0'}}" [disabled]="readOnly"
           min="0" max="23" [required]="true"/>
</div>
<div class="col-md-2" style="padding-left: 0px">
    <input type="number" class="form-control" placeholder="MM" [(ngModel)]="item.startMinute"
           onchange="if(parseInt(this.value,10)>59)this.value=59;"
           name="startMinute" value="{{item.startMinute | number:'2.0-0'}}" [disabled]="readOnly"
           min="0" max="59" [required]="true"/>
</div>

我在我的应用程序中使用 Angular v5。知道我在这里做错了什么吗？

Answer 1

您的问题是您正在使用 ngModel 指令。 NgModel 控制输入的值，因此 value 属性中设置的表达式无效，因为它被 NgModel.

覆盖

您应该验证组件代码中的数据，包括任何强制转换。

例如，您可以制作 getter/setter:

get minutes(): number {
    return this.item.startMinute;
}

set minutes(value: number) {
    item.startMinute = Math.max(value, 59);
}

这样，如果在某些情况下用户插入了错误数据，它会强制转换为有效值。

现在，在您的组件中，您将 ngModel 绑定到 minutes 而不是 item.startMinute。小时也可以这样做。

小数管道在页面加载时不起作用

Decimal pipe not working on page load

angular-pipe

angular