2

Summary Question:

(question only applies to input type='number')

How to input/show values with 'thousands' commas (eg, 2,333,444) using an formcontrol of input of type=number inside a mat-form-field which resides within an Angular reactive form?

Consider a reactive angular form:

<form [formGroup]="myForm">

  <mat-form-field>
    <input type="number' formcontrolname="myInput" matInput placeholder="Input">
  </mat-form-field>

</form>

The form data model item for 'myInput' is bound to a number and cannot change. All is well when entering and displaying numbers (eg:2333444) AND calculating other numbers based on it.

Now, I'd like to display comma separated numbers in that input type=number field at every thousands (eg: 2,333,444).

I have a couple of elaborate tricks that would do this like creating a custom form field control (see).

I understand the conflict between the input type=number, the collateral calculations AND requiring the text entry act like string/text with the commas--which is much better with input type="text". It is what it is.

Note 1: The input=number should show commas on initial load

Note 2: The input=number should automatically add commas on user input.

But is there a simpler way?

MoMo
  • 1,836
  • 1
  • 21
  • 38
  • 2
    Possible duplicate of [How to specify thousand separator for number pipe in Angular 4](https://stackoverflow.com/questions/44672225/how-to-specify-thousand-separator-for-number-pipe-in-angular-4) – Stavm Nov 03 '18 at 17:45
  • 1
    Using Input number type is not possible to achieve this. IF you use input type text, it will be achievable. – Suresh Kumar Ariya Nov 03 '18 at 18:02
  • 1
    @stavm not exactly. – MoMo Nov 03 '18 at 19:47

0 Answers0