Angular - bind different values to view and model

Question

I have an input field like this:

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

The input is for currency, so I want the user to be able to write 12345 (number) and the field should be formatted like this: 12.345,00 € (string) My problem is that I want to preserve the original inputted number to be saved to the database.
Is there a way to do that? Thanks.

EDIT
After @ConnorsFan answer I edited my code but it's still not working, the value is not formatted. Am I missing some import? Here's my code.
view

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

component

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
I was looking for a solution to my problem and I found this question similar to mine. I used the approach suggested by the accepted answer, and now my view looks like this:

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

The pipe seems to work, but the ngModelChange triggers at every digit inputted. So if I type 12345 I get 1,00 €2345 and the consequential error: InvalidPipeArgument: '1,00 €2345' for pipe 'CurrencyPipe'. Is there a way to solve this kind of side effect?

add your component code for onValueChange($event.target.value) event handler — Syedur, Nov 23 '17 at 17:35

ConnorsFan · Answer 1 · 2017-11-24T13:58:05.347

1

You can format the value in the field with the CurrencyPipe:

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

As explained in this answer from Benedikt, a locale may also be specified. You can save the numeric value to your database as you want in onValueChange.

This plunker shows how it can be done for Angular 4.2.4, using the following code:

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 {}

edited Nov 24 '17 at 13:58

answered Nov 23 '17 at 17:38

ConnorsFan

70,558
13
122
146

I tried this and I'm afraid this works only inside the double curly brackets. – esseara Nov 23 '17 at 17:50
According to my tests (see [this plunker](https://plnkr.co/edit/iTc0g9WtIhmt7k9qVMsu?p=preview)), it works also with `ngModel`. – ConnorsFan Nov 23 '17 at 19:15
Hi @ConnorsFan, I updated my code. Your solution is fine but doesn't work for me, while it works perfecly if I do something like {{richiesta.myValue | currency:'EUR':true}}. – esseara Nov 24 '17 at 10:23
What version of Angular are you working with? Do you see any error in the console when loading the application? – ConnorsFan Nov 24 '17 at 12:45
I just posted another edit. I'm using angular 4.2.4 and in the code of my first edit I don't see any error. – esseara Nov 24 '17 at 12:48
Make sure that you import the `CommonModule` and that you add it to the `imports` list of the `AppModule`, as shown in the `app.ts` file of my plunker. My solution should work for you like it does in the plunker. – ConnorsFan Nov 24 '17 at 12:50
I changed the version of my plunker to Angular 4.2.4, and the locale to it-IT. – ConnorsFan Nov 24 '17 at 12:54
I added the CommonModule that was missing, but still nothing. I'm starting to think that there's something in my app that prevents this kind of behaviour... – esseara Nov 24 '17 at 14:02

Angular - bind different values to view and model

1 Answers1