Display a number with 2 decimal places in a number input

Question

I have an input which goes from min: 0 to max: 1. The default value is 1. I need it to display as 1.00 however. How can I do this?

Input html:

<input id="scale"
       name="scale"
       class="ui-g-9"
       type="number"
       [min]="0"
       [step]="0.01"
       [max]="1"
       [required]="true"
       [(ngModel)]="product.scale" <!-- this default value is 1.00 -->
       placeholder="Enter the scale">

Does this answer your question? [Make an html number input always display 2 decimal places](https://stackoverflow.com/questions/14862009/make-an-html-number-input-always-display-2-decimal-places) — Jayant Jeet Tomar, Jun 19 '20 at 08:33
@JayantJeetTomar No it's not a duplicate, that question is about angular js. And the solution also doesn't work when there is a default value. It works only when I go -1 to 0.99 and then +1 to 1.00 — , Jun 19 '20 at 08:44
just change ```[(ngModel)]="product.scale"``` to ```[(ngModel)]="parseFloat(product.scale).toFixed(2)"``` — Jayant Jeet Tomar, Jun 19 '20 at 08:49
@JayantJeetTomar type of product.scale is number. parseFloat doesn't work on numbers. — , Jun 19 '20 at 08:53
Even better. use ```[(ngModel)]="(product.scale).toFixed(2)"``` — Jayant Jeet Tomar, Jun 19 '20 at 08:56
@JayantJeetTomar Doesn't work. I get errors: `Parser Error: Unexpected token '=' at column 30 in [(ivcProduct.scale).toFixed(2)=$event] in ng:///IvcModule/IvcProductDialogComponent.html@35:19 ("roup> [ERROR ->] — , Jun 19 '20 at 09:08

score 1 · Accepted Answer · answered Jun 19 '20 at 09:12

Fixed it by using @ViewChild in the component to get the reference to the input element:

export class Component implements AfterViewChecked {
    @ViewChild('scale') scaleInput;

    /**
     * Angular after view checked handler
     */
    ngAfterViewChecked(): boolean {
        // Display the default value: 1 with 2 decimal places: 1.00
        this.scaleInput.nativeElement.value = parseFloat(this.scaleInput.nativeElement.value).toFixed(2);

        return super.ngAfterViewChecked();
    }
}

Where the html input is now:

            <input #scale <!-- IMPORTANT PART -->
                   id="scale"
                   name="scale"
                   class="ui-g-9"
                   type="number"
                   (input)="setTo2FractionalDigits($event)"
                   [min]="0"
                   [step]="0.01"
                   [max]="1"
                   [required]="true"
                   [(ngModel)]="ivcProduct.scale"
                   placeholder="Enter the scale">

score -2 · Answer 2 · answered Jun 19 '20 at 09:02

-2

Step 1: Edit your input tag

<input id="scale"
       name="scale"
       class="ui-g-9"
       type="number"
       onchange="setTwoNumberDecimal"
       [min]="0"
       [step]="0.01"
       [max]="1"
       [required]="true"
       [(ngModel)]="(product.scale).toFixed(2)" <!-- this default value is 1.00 -->
       placeholder="Enter the scale">

Step 2: Write the setTwoDecimalPlace method

function setTwoNumberDecimal(event) {
    this.value = parseFloat(this.value).toFixed(2);
}

answered Jun 19 '20 at 09:02

Jayant Jeet Tomar

167
1
1
14

1

Doesn't work. I get errors: `Parser Error: Unexpected token '=' at column 30 in [(ivcProduct.scale).toFixed(2)=$event] in ng:///IvcModule/IvcProductDialogComponent.html@35:19 ("roup> [ERROR ->] – Jun 19 '20 at 09:08

Display a number with 2 decimal places in a number input

2 Answers2