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
– Syedur, Commented Nov 23, 2017 at 17:35

Martin Parenteau · Accepted Answer · 2017-11-24 13:58:05Z

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, 2017 at 13:58

answered Nov 23, 2017 at 17:38

Martin Parenteau

74k13 gold badges137 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

esseara Over a year ago

I tried this and I'm afraid this works only inside the double curly brackets.

Martin Parenteau Over a year ago

According to my tests (see this plunker), it works also with ngModel.

esseara Over a year ago

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

Martin Parenteau Over a year ago

What version of Angular are you working with? Do you see any error in the console when loading the application?

esseara Over a year ago

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.

|

Collectives™ on Stack Overflow

Angular - bind different values to view and model

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related