# Parsers and formatters in AngularJS

> $parsers and $formatters are used in AngularJS's ngModel directive to convert data between the view and the model. $parsers transforms data from view to model, while $formatters transforms data from model to view.

- Canonical URL: https://marcelocarmona.com/parsers-and-formatters
- Language: English (en-US)
- Published: 2015-10-16
- Tags: Angularjs, Javascript
- Other languages: [Espanol](https://marcelocarmona.com/es/parseo-y-formateo)

---

# $parsers

It is an array of functions to execute. These functions run in order, like a pipeline, every time the control reads a DOM value. The functions are called in array order, the result of each function becomes the input for the next function, and the final return value is sent to the `$validators` collection.

If the parser returns `undefined`, it means an error occurred. `$validators` will not be executed, and `ngModel` will be set to `undefined` unless `ngModelOptions.allowInvalid` is set to `true`. The parse error is stored in `ngModel.$error.parse`.

# $formatters

It is an array of functions that are executed in the pipeline when `ngModel` changes. The functions are called in reverse order, and each one passes its value back to the next.
The last returned value is used as the DOM value.

In the following image, you can see that parsers are used to transform data from the view to the model, and formatters are used to transform data from the model to the view.

![](/static/images/blog/ng-model-flow.png)

---

Site entrypoint for agents: [llms.txt](https://marcelocarmona.com/llms.txt) · [llms-full.txt](https://marcelocarmona.com/llms-full.txt) · [ai-index.json](https://marcelocarmona.com/ai-index.json) · [sitemap.xml](https://marcelocarmona.com/sitemap.xml)

Every HTML page on this site also serves this Markdown representation via
`Accept: text/markdown`, or by appending `.md` to the URL.