Question

import { Directive, Output, ElementRef, Renderer, EventEmitter } from '@angular/core';

@Directive({
  selector: '[number-input]',
  host: {
    '(keyup)': 'handleKeyup($event)'
  }
})
export class NumberInputDirective {
  @Output() ngChange = new EventEmitter();

  constructor(public element: ElementRef, public renderer: Renderer) {
    renderer.setElementProperty(element, 'type', 'tel');
  }

  handleKeyup(e) {
    var val = e.target.value;
    val = parseInt(val.toString().replace(/\./g,''));
    val = (val / 100).toFixed(2);

    e.target.value = val;
    this.ngChange.emit(e.target.value);
  }
}

我正在尝试编写一个简单的指令，该指令将在写入数字时移动数字的小数点。例如，当用户键入“ 1”时，将其更改为“ 0.01”，则下一个数字将放置在末尾，小数点移到更多的空间“ 0.11”，依此类推，始终为2小数点。

我有一个逻辑工作正常，但最后一次按下的键未保存到模型中。因此，如果键入“ 200”，则视图将按预期显示为“ 2.00”。输入后，它会变回'0.20'。

有没有一种方法可以将更改直接保存到模型，以便在离开输入字段时不会发生这种情况？

当我从指令内部更改元素值时，Angular模型未更新

0 个答案: