Question

我有一个这样的输入字段： <input myCurrencyFormatter type="text" [(ngModel)]="value" name="value">

应将输入值格式化为数字，例如：1 024,50（此值仅对输入可见），但应保持ngModel中的值不格式化：1024.05（点号而不是逗号）。我该怎么办？这是我的指令和管道：https://stackblitz.com/edit/angular-6smqvf?file=src%2Fapp%2Fapp.component.html 我不知道如何输入逗号并保存到模型点。

Answer 1

可能有几种方法。一种解决方案是使用自定义属性，将转换后的输入保存到其中。用(change)收听输入更改并在那里进行转换。在下面找到一个示例：

在模板中：

<form (ngSubmit)="test(value)">
  <input myCurrencyFormatter type="text" [ngModel]="value" 
     (change)="storeMyValue($event)"
     name="value">
  <button type="submit">Wtślij</button>
</form>
Custom value: {{ myCustomValue }}

在组件中：

myCustomValue: string;

public storeMyValue(event) {
   // the following replacements are not very sophisticated, but they
   // show the idea
   this.myCustomValue = event.target.value.trim().replace(/\s+/g, '').replace(",",".");
}

如果要重复使用此功能，则可能需要考虑为这种情况编写自定义组件。

Answer 2

OnFocus 移除分隔符并在聚焦时恢复它

@HostListener('focus')
  onFocus() {
    let element = this.el.nativeElement;

    // Remove separator
    element.value = element.value.toString().replace(this.separator, '');
  }

  @HostListener('focusout')
  onFocusLost() {
    let element = this.el.nativeElement;

    // Add separator
    if (+element.value > 999) {
      element.value = element.value.replace('/^\d+/g', '').replace(/\B(?=(\d{3})+(?!\d))/g, this.separator);
    }

}

如何显示与ngModel不同的输入值

2 个答案: