在输入字段中始终显示小数点后2位的数字

Question

我下面有一个输入字段，我希望它总是以小数点后2位的形式显示输入值，如果我输入1，它将在输入字段中显示1.00，我们如何使用formcontrol做到这一点？因为我没有使用ngmodel。谢谢

我尝试使用mask=；分离器。2，但它不起作用。谢谢你的任何想法和帮助

在此处输入图像描述

#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');
}
}