Display number always with 2 decimal places on input field

Question

I have an input field below, what I want to happen is that it should always display the input value in 2 decimal places, if I input 1, it will show 1.00 in the input field, how do we do that using the formcontrol? cause I am not using ngmodel. Thanks.

I tried using mask="separator.2 but it does not work. Thanks for any idea ang help

enter image description here

#html code

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

#ts code

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

Answer 1

If you're using reactive forms and you're patching a value, you need to patch the value you want to HTML to render.

You can use Angular's DecimalPipe in TypeScript:

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