CODEWITHSUNDEEP
angularinputdata-bindingformatting
esseara
esseara

Reputation: 880

Angular - bind different values to view and model

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?

Upvotes: 1

Views: 3281

Answers (1)

Martin Parenteau
Martin Parenteau

Reputation: 73731

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

Upvotes: 1

Related Questions