Angular 使用ngModel格式化输入中的数字

我有一个链接到包含相关数据的对象的输入：

  <input type="text" [(ngModel)]="element.number" name="someName">

元素是具有属性号的对象。数字是数字类型，它始终是整数

我想显示一个格式化的输入值（将秒转换成更易于阅读的格式）。假设

元素。数字
为
140
，显示值为
00:02:20
。如果
元素.number
为22，则显示的值为
00:00:22
。如果
element.number
为
3670
，则显示值为
01:01:10
，依此类推

如果用户将
00:00:22
编辑为
00:01:44
，则
元素的编号将更新为
104

对于应用程序需要的所有逻辑，
元素.number
必须是整数。我该怎么做？我可以在表达式上使用管道吗？我应该将输入分成3个输入字段吗？
我认为您需要更多地了解html5格式。试试这个：

<input type="time" step="1" />



工作地点：

试试这个：

  import { Component } from '@angular/core';

        @Component({
          selector: 'app-root',
          template: '
         <div>
           <p>The number is {{number}}</p>
           <p>
             <input type="number" [(ngModel)]="formattednumbers.hrs" 
                name="hrs" (change)="updateNumber()">:
             <input type="number" [(ngModel)]="formattednumbers.mins" 
                name="mins" (change)="updateNumber()">:
             <input type="number" [(ngModel)]="formattednumbers.secs" 
                name="secs" (change)="updateNumber()">
           </p>
         </div>
         '
        })
        export class AppComponent {
          number = 140;
          formattednumbers: TimeFormatter;

          constructor() {
            this.formattednumbers = this.fancyTimeFormat(this.number);
          }

          fancyTimeFormat(time): TimeFormatter {
            // Hours, minutes and seconds
            const hrs = Math.floor(time / 3600);
            const mins = Math.floor((time % 3600) / 60);
            const secs = Math.floor(time % 60);

            const ret = {
              hrs: hrs,
              mins: mins,
              secs: secs
            };

            return ret;
          }

          updateNumber() {
            const h2s = this.formattednumbers.hrs * 3600;
            const m2s = this.formattednumbers.mins * 60;
            const s = this.formattednumbers.secs;
            this.number = h2s + m2s + s;
            this.formattednumbers = this.fancyTimeFormat(this.number);
          }
        }

        interface TimeFormatter {
          hrs: number;
          mins: number;
          secs: number;
        }

从'@angular/core'导入{Component}；
@组成部分({
选择器：'应用程序根'，
模板：'
号码是{number}


:
:

'
})
导出类AppComponent{
数字=140；
格式化的数字：TimeFormatter；
构造函数（）{
this.formattednumbers=this.fancyTimeFormat（this.number）；
}
fancyTimeFormat（时间）：TimeFormatter{
//小时、分钟和秒
常数小时=数学楼层（时间/3600）；
常数分钟=数学楼层（（时间%3600）/60）；
常数秒=数学下限（时间%60）；
常数ret={
小时：小时，
分钟：分钟，
秒：秒
};
返回ret；
}
updateNumber（）{
常数h2s=this.formattednumbers.hrs*3600；
const m2s=this.formattednumbers.mins*60；
常数s=this.formattednumbers.secs；
该数量=h2s+m2s+s；
this.formattednumbers=this.fancyTimeFormat（this.number）；
}
}
接口时间格式化程序{
小时数：个；
分钟：数字；
秒：数字；
}

您可以对代码进行更多的重构，但我认为您的问题的答案就在这里：）