角度 - 私はこのような入力フィールドを持つ

Question

別のビューに値とモデルをバインド：

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

入力は、通貨のためにあるので、私は、ユーザーが12345（番号）とフィールドを書くことができるようにしたいです12.345,00€（文字列） 私の問題は、データベースに保存する元の入力番号を保存したいということです。
これを行う方法はありますか？ありがとう。

EDIT
@ConnorsFan答えた後、私は自分のコードを編集したが、それはまだ働いていない、値がフォーマットされていません。私はいくつかの輸入がありませんか？ここに私のコードです。
図

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

成分

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

app.module

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

EDIT2
私の問題の解決策を探していましたが、私はthis questionと似ています。私は受け入れ答えによって提案されたアプローチを使用し、そして今、私の見解は次のようになります。

<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)"> 

パイプが動作しているようですが、ngModelChangeは、入力されたすべての桁でトリガします。だから私が12345を入力すると、私は1,00€2345を得、結果的なエラー：InvalidPipeArgument: '1,00 €2345' for pipe 'CurrencyPipe'。このような副作用を解決する方法はありますか？

Answer 1

あなたがCurrencyPipeとフィールドの値をフォーマットすることができる：

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

としては、ベネディクトからthis answerで説明し、ロケールを指定することもできます。 onValueChangeに数値をデータベースに保存することができます。

This plunkerは、次のコードを使用して、角度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 {}