在输入字段上显示数字始终保留 2 位小数

Question

我下面有一个输入字段，我想要的是它应该始终以小数点后两位显示输入值，如果我输入 1，它会在输入字段中显示 1.00，我们该怎么做使用表单控件？因为我没有使用 ngmodel。谢谢

我尝试使用 mask="separator.2 但它不起作用。感谢您的任何想法和帮助

enter image description here

#html代码

  <mat-form-field appearance="fill">
              <mat-label>Acres</mat-label>
              <input mask="separator.2" thousandSeparator="," matInput formControlName="acres" placeholder="">
            </mat-form-field>

#ts 代码

  private _createModelForm(): FormGroup {
    return this.formBuilder.group({
      acres: this.model.acres
    });
  }

Answer 1

如果您使用的是响应式表单并且正在修补值，则需要修补要 HTML 呈现的值。

您可以在 TypeScript 中使用 Angular 的 DecimalPipe：

import { DecimalPipe } from '@angular/common';

export class Mycomponent {

    constructor(private decimalPipe: DecimalPipe) {}

    private _createModelForm(): FormGroup {
    return this.formBuilder.group({
      acres: this.transformDecimal(this.model.acres)
    });
  }

  transformDecimal(num) {
    return this.decimalPipe.transform(num, '1.2-2');
  }
}

在输入字段上显示数字始终保留 2 位小数

Display number always with 2 decimal places on input field

javascript

angular

typescript

angular-material