Numeric format masks with commas for thousands

I have an Angular 7 app using reactive forms with a numeric input box:

<input igxInput name=“marketValue” type=“number” formControlName=“marketValue”/>

The users have requested to see commas every 1000 when they are typing in a large number. For example, 100,000,000.  Do you have any way to accomplish this?  Any help will be greatly appreciated.

 

Thanks as always,

 

JK

Hello Jeff,

After investigating this further, I determined that your requirement could be achieved by setting a mask to the igxInput. The mask would accept only numbers and on every third number a comma would be set:

<input #ssn name="number" type="text"

        igxInput

        [igxMask]="'000,000,000'"

        [(ngModel)]="number"

     />

I have prepared a sample, demonstrating the described behavior. Please test it on your side and let me know if you need any further information regarding this matter.

Regards,
Monika Kirkova,
Infragistics

Hi Monika, thanks for getting back to me.  The only problem is when entering a number it appears it's left justified and looks strange and is confusing.  Anyway to fix this?  For example, when entering 100 it appears as 1,00.  See attached image of your StackBlitz example.  

Thanks,

JK

Hello Jeff,

The behavior occurs because the position of the first digit is based on the mouse click position. This could be avoided by adding [igxTextSelection]="true" to the input, additionally IgxTextSelectionModule should be added to the app.module.ts file.

However, I determined that a more suitable solution for this requirement could be to define a custom Pipe and format the input in order for a thousand separator to be added:

I have prepared a sample, demonstrating the described behavior. Please test it on your side and let me know if you need any further information regarding this matter.

Regards,
Monika Kirkova,
Infragistics

Thanks for the help Monika.  This worked great!

JK

Hello Jeff,

I am glad that you find my suggestion helpful and were able to solve your issue.

Thank you for using Infragistics components.

Regards, 

Monika Kirkova,

Infragistics