1

En mi formulario reactivo tengo un input para el precio, a medida que el usuario va escribiendo el precio, este toma por defecto el formato de dolar, pero necesito que por defecto tome el formato peso Argentino.

componet.ts

import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { CurrencyPipe } from '@angular/common';

form: FormGroup;

 constructor(
    private currencyPipe: CurrencyPipe,
    private formBuilder: FormBuilder
  ) { 
    this.buildForm();

    // cuando escribe el precio 
    this.form.valueChanges.subscribe(formulario => {
      if(formulario.price){
        this.form.patchValue({
          price: this.currencyPipe.transform(formulario.price.replace(/\D/g, '').replace(/^0+/, ''), 'USD', 'symbol', '1.0-0')
        }, {emitEvent: false});
      }
    })
  }

 buildForm() {
    this.form = this.formBuilder.group({
      // name: ['', [Validators.required, Validators.maxLength(50)]],
      // year: ['', [Validators.required, Validators.min(1500),Validators.max(this.year)]],
      price: ['', [Validators.required]],     
    });
  }
  

Aca component.html (solo muestro el input del precio para ahorrar código).

<form [formGroup]="form">
 <label>Precio</label>
 <input type="text" formControlName="price" placeholder="$">
</form>

1 respuesta 1

1

Sería interesante que mencionaras con cuál versión de Angular estás trabajando. Sin embargo, asumiré que estás trabajando con la versión 11 (última).

Como indica la documentación, puedes usar formatCurrency(), ya que lo estás implementando desde el código, no la plantilla.

Estructura de la sobrecarga (según documentación):

formatCurrency(
  value: number,
  locale: string,
  currency: string,
  currencyCode?:
  string,
  digitsInfo?: string
): string

Cabe mencionar que currencyCode recibe código ISO-4217 de la divisa que, en el caso de Argentina, es ARS.

Ejemplo:

import { formatCurrency } from '@angular/common';
... 
  public numeroConFormato = formatCurrency(parseFloat('1521.8'), 'en-US', 'ARS ', 'ARS', '4.2-2')
...

En este caso, asumimos que locale es en-US, pero puedes implementar otro teniendo la debida configuración i18n.

El tercer parámetro, 'ARS ', es el prefijo del texto (puedes colocarlo como '$').

El cuarto parámetro, 'ARS' es el código ISO-4217

El último parámetro, es el formato de plantilla para el decimal. Su estructura es:

numeroMaximoDeEnteros.digitosMinimosDeLaFraccion/decimales-digitosMaximosDeLaFraccion/decimales

Es decir, según el ejemplo anterior (4.2-2):

4: número máximo de interos 2: número de decimales mínimo 2: número de decimales máximo

Resultado esperado según ejemplo:

<p>{{ numeroConFormato }}</p>

Impreso como:

ARS 1,521.80


Dejo estos ejemplos de referencia, ya que hay más de una forma de implementar esta funcionalidad.

2
  • Gracias por la ayuda y tu explicacion! lo que no entiendo es como acoplar tu ejemplo en el formControl o en el this.form.valueChanges
    – Claudio
    Commented el 8 feb. 2021 a las 22:39
  • @Claudio El ejemplo retorna un string con el formato, el mismo método lo puedes utilizar para parchar el valor de tu campo, siempre y cuando este sea una cadena, evidentemente, esto convertiría tu número a cadena, no aplica para campos numéricos, ya que estos, por defecto, tomarán la configuración numérica local con la respectiva API del navegador, lo cual no es posible de modificar con CurrencyPipe o formatCurrency()
    – KBeDev
    Commented el 9 feb. 2021 a las 15:02

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.