如何在 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 欧元并且我的 validaror 是 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;
};

Full demo在线

如何在 Angular 反应形式和验证器中使用货币管道

How to use curency pipes in Angular reactive form and Validator

angular-pipe

angular

angular-reactive-forms