Cover image for Angular Material matInput form control with thousands separator (excerpt)

Angular Material matInput form control with thousands separator (excerpt)

oleksandr profile image Oleksandr Updated on ・2 min read

Customizing an Angular Material directive by adding commas to digit groups in matInput numbers and support reactive Angular forms.

Every Angular developer knows Angular Material (You don't know it? Then definitely take a look). Like many other UI libraries it provides a set of form controls and among them matInput.

It is a regular text input with the possibility to display placeholder in a nice way, to add a clear button, provide custom error messages, text length hint, and even suffixes and prefixes to improve user experience. You can look at examples here.

The problem

The task I got from a customer was to display input values in digit groups for account amount form field, like this:

Surprisingly searching though the internet didn't provide some solid solutions so I decided to create my own one. I found only two things that may help:

This token is used to inject the object whose value should be set into MatInput. If none is provided, the native HTMLInputElement is used. Directives like MatDatepickerInput can provide themselves for this token, in order to make MatInput delegate the getting and setting of the value to them

  • Angular Material’s MatDatePicker expects to be applied on top of matInput so we can use its code as an example of extending matInput.


Continue reading....

I am preparing my future video-course with advanced techniques of mastering Angular/RxJS. Want to get a notification when it is done? Leave your email here (and get free video-course): http://eepurl.com/gHF0av

Like this article? Follow me on Twitter!

Posted on by:

oleksandr profile



Senior Front-End dev in itecgurus.com, 'Hands-on RxJS' video-course author — https://bit.ly/2AzDgQC, codementor.io JS, Angular and RxJS mentor. Angular-in-Depth blog writer .


markdown guide