How to use curency pipes in Angular reactive form and Validator

Question

I use Angular reactive form with a Validator (value > 0). In my Model, my data is a BigDecimal (5.80 for exemple):

this.userInfoFormGroup = this.formBuilder.group({
    money:[this.price, this.positiveVal()], 
});

I use a currency Pipe:

<input type="text" class="form-control" formControlName="money" [value]="userInfoFormGroup.get('money')?.value | currency:'EUR'">

My code is avalable online HERE

My problem is that the original value 5.8 is transformed by the pipe in € 5.8. How to use the pipe only for the display but not for the model?

I reproduce the problem when I change 5.8 by 5.9 for example. BUT my app change 5.8 by €5.90 AND my validaror is KO because € is NaN.

Answer 1

You could give this a whirl:

<input type="text" class="form-control" formControlName="money" [value]="getNumberVal(userInfoFormGroup.get('money')?.value) | currency:'EUR'">

getNumberVal(val: string): number {
  val = `${val}`;
  return parseFloat(val.replace(/\u20AC/g, ''));
}

positiveVal(): ValidatorFn {
  return (control: AbstractControl): {[key: string]: any} | null => {
    const invalid = this.getNumberVal(control.value) <= 0;
    return invalid ? {'positiveVal': {value: control.value}} : null;
};

Full demo online