Как создать вход, если дисплей и значение модели различаются? - PullRequest
Новая
       5

Как создать вход, если дисплей и значение модели различаются?

1 голос
/ 03 апреля 2019

Я пытаюсь создать вход, который отображает формат времени, но содержит значение в минутах. Например: 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.

Ответы [ 3 ]

1 голос
/ 03 апреля 2019

Вы можете использовать трубу, чтобы показать формат от минут до часов.

Демонстрация StackBlitz

Компонент: 

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))
}
0 голосов
/ 03 апреля 2019

Вы можете просто использовать событие 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);
}
}

Таким образом, вам не нужно никакого дополнительного кода, и значение обновляется в тот момент, когда вы его меняете.

0 голосов
/ 03 апреля 2019

Мне нравится использовать @HotListener blur и focus, см. stackblitz

В размытии вы преобразуете значение htmlElement.В Фокусе разбираем значение.Будьте осторожны, вы должны использовать 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]));
  }
}
...