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。一小时也可以这样做。

十进制管道在页面加载时无效

1 个答案: