如何创建显示和模型值不同的输入？

Question

我正在尝试创建一个显示时间格式的输入，但保持一个分钟的值。例如：1：30的值为90。

我的第一个选择是使用指令。现在，如果我将输入中的值更改为75，则显示的值应为1:15。我不想使用@Output和EventEmitter并设置一个方法来改变我的值。

零件：

public value = 90;

视图：

<p><input [(appTimespan)]="value"></p>
<p>Value: {{ value }}</p>

指令（剪辑）：

@Directive({ selector: '[appTimespan]'})
export class TimespanDirective {
    @Input( 'appTimespan' ) value: string;
    // @Output( 'out' ) update = new EventEmitter();

    constructor(private element: ElementRef) {
        // just to indicate the directive is applied
        element.nativeElement.style.backroundColor = 'yellow';
    }

    @HostListener('change') onChange() {
        // skip the code for calculations and formatting
        this.value = 75;
        this.element.nativeElement.value = '1:15';
        // this.update.emit(75);
    }
}

我的输入的（显示）值设置为'1:15'，很棒......但是视图中显示的值仍然显示我的初始值90，我希望它为75。

Answer 1

您可以使用管道显示分钟到小时的格式。

StackBlitz Demo

零件：

public value: number = 90;

视图：

<input type="number" [(ngModel)]="value" />
<p>Value: {{ value | toTime }}</p>

管：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'toTime'})
export class ToTime implements PipeTransform {

  convertMinsToHrsMins(minutes) {
    let h:any = Math.floor(minutes / 60);
    let m:any = minutes % 60;
    h = h < 10 ? '0' + h : h;
    m = m < 10 ? '0' + m : m;
    return h + ':' + m;
  }

  transform(value: number): string {
    return this.convertMinsToHrsMins(value);
  }
}

编辑您可以在组件中使用相同的管道来获取时间

submit(){
  console.log(this.toTime.transform(this.value))
}

Answer 2

我喜欢使用@HotListener模糊和焦点看stackblitz

在模糊中，您可以转换htmlElement的值。在Focus中解析值。小心，您必须使用ngOnInit在第一时间显示正确的值。如果我们在输入[（ngModel）]中使用该指令，我们必须使用setTimeOut -else，第一次不显示正确的值 -

export class TestPipe  implements OnInit {

  private el: any;
  constructor(private elementRef: ElementRef) {
    this.el = this.elementRef.nativeElement;
  }
  @HostListener("focus", ["$event.target.value"])
  onFocus() {
    this.el.value = this.parse(this.el.value); 
  }

  @HostListener("blur", ["$event.target.value"])
  onBlur(value) {
    this.el.value = this.transform(value);
  }

  ngOnInit()
  {
    setTimeout(()=>{
      this.el.value = this.transform(this.el.value);
    })

  }
  transform(value:any)
  {
      let minutes=+value;
      let hour=Math.floor(minutes/60);
      let rest=minutes%60;
      return hour+":"+('00'+rest).slice(-2);
  }
  parse(value:any)
  {
    let hours=value.split(":");
    return ''+((+hours[0])*60+(+hours[1]));
  }
}

Answer 3

您可以使用keyUp事件，并在每次添加/删除数字时计算时间

HTML：

<input type="number" [(ngModel)]="value"  (keyup)="changeDisplayValue()" />
<p>Value: {{ displayValue }}</p>

TS：

 export class AppComponent  {
 public value: number = 90;  
 displayValue: any;

constructor(){
 this.displayValue = this.convertTime(this.value);
}

changeDisplayValue(){
  this.displayValue = this.convertTime(this.value);
}

convertTime(minutesValue) {
  let h = Math.floor(minutesValue / 60);
  let m = minutesValue % 60;  
  return (h < 10 ? '0' + h : h) + ':' + (m < 10 ? '0' + m : m);
}
}

这样您就不需要任何额外的代码，并且值会在您更改时更新。