用NGMODEL在输入中格式化数字

Question

我已经链接到包含相关数据的对象的输入：

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

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

我想显示输入的形成值（将秒转换为更人性化的格式）。假设element.number是140，而显示的值是00:02:20。如果element.number是22，则显示的值为00:00:22。如果element.number是3670，则显示的值是01:01:10等。

如果用户比00:00:22对00:01:44进行编辑的情况比element.number更新为104。

对于应用所需的所有逻辑，element.number必须是整数。我应该如何解决这个问题？我可以在表达式上使用一些管道吗？我应该将输入分为3个输入字段吗？

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

您可以再重构代码，但是我认为您的问题的答案是：）

Answer 2

我认为您需要更多地以HTML5格式看。尝试以下操作：

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

工作：

https://html5test.com/compare/feature/form.time.time.step.html