12

This question is about restricting/validating the input when the user enters data into an input of type number.

The issue I have is that when the model first loads, any numbers that are integers or 1dp, get rendered with only 1dp. eg 40 or 40.0 both show as 40.0 (not as 40.00).

I have added this code so that after a user types a new value, it shows with 2dp:

in the template file:

(change)="setTwoNumberDecimal($event)"

in the component file:

  setTwoNumberDecimal($event) {
    $event.target.value = parseFloat($event.target.value).toFixed(2);
  }

This works to show 2dp after the user changes the value.

I tried to write a directive that should format to 2dp when the data initially loads, but although the directive does fire, it does not change the value to 2dp.

import { Directive, ElementRef, Input, Renderer2 } from '@angular/core';

@Directive ({
  selector: '[fbDecimalFormat]'
})

export class DecimalFormatDirective {

  constructor(private el: ElementRef,
              private renderer: Renderer2) {
    //renderer.setAttribute(el, 'value', parseFloat(el.nativeElement.value).toFixed(2));
    this.el.nativeElement.value = parseFloat(this.el.nativeElement.value).toFixed(2);
  }

}

FYI the commented render line did not work (error: setAttribute not recognised) - it was an attempt to be platform independent.

So the question is: How can I get the input to render its initial value with 2dps?

2 Answers 2

22

Template Forms

The solution to this was to use the built-in DecimalPipe (weirdly called number) and not use two-way binding for the model value - ie. from [(ngModel)] to [ngModel] and (ngModelChange)

    <input type="number" step="0.01" 
            (change)="setTwoNumberDecimal($event)"
            (ngModelChange)="item.value=$event"
            [ngModelOptions]="{updateOn: 'blur'}"
            [ngModel]="setting.decimal_value | number:'1.2-2'">

See this question for more info on splitting the [()] binding.

Notice also that the update fires only when the user leaves the control (blur) otherwise every time they type something it will update, which will be a frustrating UX (thanks to @Mihail's comment).

Reactive Forms

In response to the question in the comments: "Could this be used with reactive forms as well?"

The answer is:

No, using pipes with reactive forms is more complicated. You could use the pipe merely to display the value, like

 <p>{{form.get('name').value | myPipe}}</p> 

but I think the correct way is to use value accessor. More info here.

6
  • @harry I am trying to implement same it's not working for me... using this -> <input class="form-control border-r" type="number" step='0.01' value='0.00' placeholder='0.00' [ngModel]="selectedFeesEntry.spendTimeInSeconds | number: '1.2-2'" name="selectedHours" (ngModelChange)="updateHours($event)">
    – Aakriti.G
    Dec 11, 2017 at 12:29
  • Could this be used with reactive forms as well?
    – Gambo
    Dec 27, 2017 at 9:11
  • 1
    @Gambo No, using pipes with reactive forms is more complicated. You could use the pipe merely to display the value, like <p>{{form.get('name').value | myPipe}}</p> but I think the correct way is to use value accessor. More info here: stackoverflow.com/questions/40637453/…
    – rmcsharry
    Jan 3, 2018 at 16:23
  • 1
    Even (change)="setTwoNumberDecimal($event)" is not needed
    – Mihail
    Sep 4, 2018 at 15:39
  • Consider using also [ngModelOptions]="{updateOn: 'blur'}", because editing become tedious.
    – Mihail
    Sep 4, 2018 at 15:50
4

Number.toFixed(x) Formats any number for "x" number of trailing decimals. The number is rounded up, and "0"s are used after the decimal point if needed to create the desired decimal length. In template we can format the value and validating the values

value1 = 0
value2 = 0.0

<p>
  {{value1.toFixed(2)}} - shows 0.00
  {{value2.toFixed(2)}} - shows 0.00
</p>
2
  • Thanks but the question is "How can I get the input to render 2dp" not the template.
    – rmcsharry
    Oct 11, 2018 at 20:11
  • let zero = 0 and then use {{zero.toFixed(2)}}
    – Wasim
    Jun 29, 2022 at 11:25

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.