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

【问题标题】：How to display different value of input than ngModel如何显示与 ngModel 不同的输入值
【发布时间】：2019-03-22 16:41:49
【问题描述】：

我有一个这样的输入字段： <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 我不知道如何输入逗号并保存到模型点。

【问题讨论】：

标签： angular

【解决方案1】：

这可以通过像这样重新定义 getter 和 setter 来完成：

<input type="text" [(ngModel)]="displayValue" >

在ts方面：

get displayValue(){ return this.realValue + '$' ; }
set displayValue(v){ this.realValue = v?.replace('$',''); }

【讨论】：

【解决方案2】：

可能有几种方法。一种解决方案是使用自定义属性来保存转换后的输入。使用(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(",",".");
}

如果您想重复使用它，您可能需要考虑为这种情况编写一个自定义组件。

【讨论】：

我需要在这个输入字段中显示这个值，这样 [ngModel]="value" 不会更新，我将未更改的对象数据发送到服务器我有几个输入字段，我有具有诸如 docum.price、docum.amount 等属性的模型文档。
您不应在输入字段中绑定发送到后端的模型属性。 [ngModel] 中使用的属性应该只暂时存在于您的组件中。在change 方法中执行类似`this.docum.price = event.target.value...."
实际上我使用 ng2-currency-mask，但是在这个指令中，数字开始输入到小数点的左侧，例如如果我输入 10，它将是 0,10 而不是 10,00。我需要更改此设计并尝试编写自己的指令，但我不知道如何完成它。
我认为手动取消屏蔽每个输入元素，这不是一个好的选择。
没错，如果您多次出现该要求，最好使用自定义组件。然后你就可以像以前一样使用[(ngModel)]了。

【解决方案3】：

OnFocus 删除分隔符并在 focusout 时恢复它

@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);
    }

}

【讨论】：