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 interesting paragraph is on the matInput API page:

MAT_INPUT_VALUE_ACCESSOR
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.

Solution

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!