十进制管道在页面加载时不起作用

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);
}

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

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