# How To Format A Value with Angular NGX-Formly

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](https://formly.dev/) ! 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](https://betterprogramming.pub/build-fast-json-powered-forms-on-angular-with-ngx-formly-b7a00733e66e) 
2.  [How to Build Fast, Advanced JSON-Powered Forms on Angular With ngx-formly](https://betterprogramming.pub/build-fast-json-powered-forms-on-angular-with-ngx-formly-b7a00733e66e) 


![divider-byrayray.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629890886208/NhHYvPmBA.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.

%[https://gist.github.com/devbyray/f9a6bc4580cd5e663ab4d1653a90c734]

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

%[https://gist.github.com/devbyray/5f880b0e20a36080be49487335a2cffe]

![divider-byrayray.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629890886208/NhHYvPmBA.png)

## Formatters

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

```tsx
{
    //...
    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.

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

![divider-byrayray.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629890886208/NhHYvPmBA.png)

## Example

I’ve created an example project for this tutorial via [StackBlitz](https://stackblitz.com/edit/angular-vibhz9?file=src%2Fapp%2Fapp.component.ts), which you can use to experiment with the parsers.

%[https://stackblitz.com/edit/angular-vibhz9?file=src%2Fapp%2Fapp.component.ts]

If you want to check the project on Github, [please find the repository here](https://github.com/devbyray/angular-ngx-formly-value-formatter-parser).

## 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](https://cdn.hashnode.com/res/hashnode/image/upload/v1629789655319/nBF6anHH4w.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](https://hashnode.com/@devbyrayray/joinme)? 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](https://twitter.com/@devbyrayray) when you want to keep it private. My DM's are always open 😁*