Question

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

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

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

我想显示输入的格式化值（将秒转换为更易读的格式）。可以说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.step.html

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

2 个答案: