CODEWITHSUNDEEP
htmlcssangularangular-material
Ole
Ole

Reputation: 46900

Formatting an Angular Material Form Field Number to 2 Decimal Places?

If we have an Angular Material Form Field containing number like this:

<mat-form-field>
  <input matInput
    readonly
    type="number"
    formControlName="unitsFulfilled"
    placeholder="Units Fulfilled">
</mat-form-field>

How do we format it to 2 decimal places. Do we need to do it on the number itself before assigning to the control via formControlName?

Upvotes: 5

Views: 16807

Answers (2)

Alex Kuturkin
Alex Kuturkin

Reputation: 21

In my Angular project I will need make these changes to stackblitz example

const next: string = [
      /*  current.slice(0, position), */ current.slice(position),
      event.key == 'Decimal' ? '.' || ',' : event.key,
    ].join('');

otherwise I couldn't drive more than two digits before the dot.

Upvotes: 2

Ishan Shah
Ishan Shah

Reputation: 393

You can simply use the create a directive and use it in the HTML. Kindly refer the following link for the same.

Allow only two decimal places

In an example, there is simple input field. But you can also use it with the material UI components.

Upvotes: 4

Related Questions