Question

我有一个像这样的输入字段：

checked

输入是货币，所以我希望用户能够写入12345（数字），字段应格式如下：12.345,00€（string）我的问题是我想保存原始输入的数字以保存到数据库中。
有没有办法做到这一点？感谢。

修改
在@ConnorsFan回答之后，我编辑了我的代码，但它仍然无法正常工作，该值未格式化。我错过了一些进口吗？这是我的代码。
视图

<input type="text" id="myValue" [ngModel]="richiesta.myValue" 
formControlName="myValue" (change)="onValueChange($event.target.value)">

成分

    <input type="text" class="form-control" id="myValue" [ngModel]="richiesta.myValue | currency:'EUR':true" formControlName="myValue"
(change)="onValueChange($event.target.value)">

app.module

onValueChange(e){
    console.log(e)
    console.log(this.richiesta.value.myValue)
  }

EDIT2
我正在寻找解决问题的方法，我发现this question与我的相似。我使用了接受的答案建议的方法，现在我的观点看起来像这样：

import { LOCALE_ID, NgModule, Pipe, PipeTransform } from '@angular/core';
...
providers: [{provide: LOCALE_ID, useValue: 'it-IT'}]

管道似乎有效，但<input type="text" class="form-control" id="myValue" (ngModelChange)="richiesta.myValue = $event" [ngModel]="richiesta.myValue | currency:'EUR':true" formControlName="myValue" placeholder="Importo Finanziamento (€)" (change)="onValueChange($event.target.value)">触发每个输入的数字。因此，如果我输入12345，我会得到1,00€2345以及相应的错误：ngModelChange。有没有办法解决这种副作用？

Answer 1

您可以使用CurrencyPipe

格式化字段中的值

[ngModel]="richiesta.myValue | currency:'EUR':true"       (for Angular 2 and 4)
[ngModel]="richiesta.myValue | currency:'EUR':'symbol'"   (for Angular 5)

如Benedikt的this answer中所述，也可以指定区域设置。您可以根据需要在onValueChange中将数值保存到数据库中。

This plunker显示了如何使用以下代码对Angular 4.2.4进行操作：

import { Component, NgModule, LOCALE_ID } from '@angular/core'
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser'
import { CommonModule } from '@angular/common';

@Component({
  selector: 'my-app',
  template: `<h1>Angular 4 - Currency formatting</h1>
  <input [ngModel]="amount | currency:'EUR':true" (change)="onValueChange($event.target.value)" name="inputField" type="text" />
  `
})
export class App { 
  public amount: number = 1234;

  public onValueChange(value): void {
    this.amount = value;
  }
}

@NgModule({
  imports: [ BrowserModule, FormsModule, CommonModule ],
  declarations: [ App ],
  providers: [{ provide: LOCALE_ID, useValue: 'it-IT' }],  
  bootstrap: [ App ]
})
export class AppModule {}

Angular - 将不同的值绑定到视图和模型

1 个答案: