How To Format A Value with Angular NGX-Formly

A handy way to format postal codes, phone numbers, bank accounts, and so much more

Dev By RayRay
Β·Dec 31, 2021Β·

3 min read

How To Format A Value with Angular NGX-Formly

Subscribe to my newsletter and never miss my upcoming articles

Play this article

Table of contents

  • NGX-Formly Formatters
  • Formatters
  • Example
  • Conclusion
  • Thanks!

Working with forms is a nightmare in the current state of Angular (yes, that’s my opinion)! You have to do so much manual work, which is not very productive while building enterprise-level applications.

That’s why I love to use NGX-Formly ! They make writing small, big, and even complex forms easier. (You can read earlier posts below πŸ˜‰) But lately, I have wanted to change the format of input values after the user has filled them in. Because there is a certain way, the backend API expects them.

If you don’t know how to use NGX-formly, I highly recommend following my earlier posts (they are even included in the documentation from NGX-formly itself πŸ‘)

  1. Build Fast, JSON-Powered Forms on Angular With Ngx Formly
  2. How to Build Fast, Advanced JSON-Powered Forms on Angular With ngx-formly

divider-byrayray.png

NGX-Formly Formatters

For example, we want to create a postal code field and a field for initials. In these fields, we want to apply specific formatting on the value. In this case, it will be visual formatting, nothing very complex.

The logic behind the formatInitials() method looks like this.

divider-byrayray.png

Formatters

So every field that needs a formatter needs a property parser.

{
    //...
    parsers: [(value: string) => value?.toUpperCase()],
    //...
}

The parser needs to be an array of functions. Every function has a parameter that holds the value. Since the parsers need an Array, you can apply multiple formatters on every field.

The function needs to return a new value. So it can be updated in the input field.

Ensure that the field config also has the property expressionProperties in which the model is updated; otherwise, it will not work.

expressionProperties: {
    'model.postal': 'model.postal',
},

divider-byrayray.png

Example

I’ve created an example project for this tutorial via StackBlitz, which you can use to experiment with the parsers.

If you want to check the project on Github, please find the repository here.

Conclusion

Hopefully, this tutorial helps you to format your values easier with NGX-Formly. And if you didn't use NGX-Formly, I hope this will let you build forms even faster!

Good luck and have fun πŸ‘

Happy Coding πŸš€

Thanks!

hashnode-footer.png I hope you learned something new or are inspired to create something new after reading this story! πŸ€— If so, consider subscribing via email (scroll to the top of this page) or follow me here on Hashnode.

Did you know that you can create a Developer blog like this one, yourself? It's entirely for free. πŸ‘πŸ’°πŸŽ‰πŸ₯³πŸ”₯

If I left you with questions or something to say as a response, scroll down and type me a message. Please send me a DM on Twitter @DevByRayRay when you want to keep it private. My DM's are always open 😁

Did you find this article valuable?

Support Dev By RayRay by becoming a sponsor. Any amount is appreciated!

See recent sponsors |Β Learn more about Hashnode Sponsors
Β 
Share this

Impressum

I learn by writing, and write while learning more and more each day!πŸ‘Š A developer is never finished with learning, thinking that is the most stupid thing to do 🀣