如何使用Angular反应形式和验证程序使用货币管道

Question

我使用带有验证器的Angular反应形式（值> 0）。在我的模型中，我的数据是BigDecimal（例如5.80）：

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

我使用货币管道：

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

我的代码可在线获得HERE

我的问题是，原始值5.8由管道转换为5.8欧元。如何仅将管道用于显示而不将管道用于模型？

例如，当我将5.8更改为5.9时，会重现该问题。但是我的应用将5.8更改为€5.90，并且我的验证人为KO，因为€为NaN。

Answer 1

您可以旋转一下：

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

[C0在线]