angular - Number pipe taking only three digits before decimal

Question

I am working on an angular app. I have a input field. My code is as follows

<input matInput style="width:100%;" type="number" [ngModel]="input | number : '1.2-2'" (ngModelChange)="input = $event"   autocomplete="off">

stackblitz:

https://stackblitz.com/edit/ngx-slider-simple-slider-example-pl2peu?file=src%2Fapp%2Fapp.component.html

In this input field I am using number pipe. The problem I am facing with number pipe is if I enter a number in input field,then it is taking only 3 digits before decimal, if I try to enter 4th digit before decimal number disappers. I want to allow user to enter as many number as he wish before decimal. How can I resolve this?

Answer 1

I think your best bet is to implement ControlValueAccessor and create your own custom form control that formats the data the way that you want. This is a similar question and the accepted answer has a custom form control implementation that should put you on the right track,

How to format number input in angular