首页 文章

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

提问于
浏览 次
1

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

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

element是具有属性编号的对象 . 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个输入字段吗？

angular

2 回答

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

    你可以更多地重构代码，但你认为你的问题的答案是:)

    回复于
  • 0

    我认为你需要更多的html5格式 . 试试这个：

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

    适用于：

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

    回复于

相关问题