[SOLVED] Display number always with 2 decimal places on input field


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">
              <input mask="separator.2" thousandSeparator="," matInput formControlName="acres" placeholder="">

#ts code

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


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

Answered By – Nika Skakaia

Answer Checked By – David Marino (BugsFixing Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *