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