Translating Angular Form Error Messages

In part Three of my Angular Form Series, I am going to introduce a pipe to translate error codes into their appropriate spoken language.

In my previous article I explain how to use a generic error pipe to control all error messages for a form control.

Again we will start with a login form:

I want to introduce a language translation npm package called ngx-translate.

To install the package, you can run in the command line:
npm install @ngx-translate/core — save

You will need to create your language asset files for each language you intend on translating.

Also you will need to set up your app module to include the translation module. You can see how I did it here.

The next thing we need is a dropdown list to control the currently select language.

In our constructor, we inject the translate dependency, and set up the default language based on the browser’s default language.

I want to translate the username field, and all error messages. Here is what the asset file looks like for English:

Our error pipe from the previous article changes a little to match the new JSON format.

Now, this input error pipe’s output will be fed into the translation pipe. And thus, we will get our error message.

When we switch the language from English to French, it will automatically change the error message on the screen.

Here is the full stackblitz example

The next logical task at hand is to create a input error component, so its style can be reused across the application.

Here you will see it broken out into an error component.