DEV Community

ILshat Khamitov
ILshat Khamitov

Posted on

3

Multi-language translate validation errors in Angular10 with ngx-dynamic-form-builder

Because multi-language supported in class-validator-multi-lang, now ngx-dynamic-form-builder also supports this feature.

If you don't know about this library, please read the previous post of how to use it.

Set validation messages as settings when creating form group

this.form = this.fb.group(
  Company,
  {
    name: '',
  },
  {
    classValidatorOptions: {
      messages: {
        'The company name must be longer than 15': 'company name must be longer than 15 (translate on other language)',
      },
    },
  }
);
Enter fullscreen mode Exit fullscreen mode

Set validation messages on runtime after for exists form group

this.form.setValidatorOptions({
  messages: {
    'The company name must be longer than 15': 'company name must be longer than 15 (translate on other language)',
  },
});
Enter fullscreen mode Exit fullscreen mode

Set translate property name in error

this.form.setValidatorOptions({
  titles: { regionNum: 'number of region (translate property name in error on other language)' },
});
Enter fullscreen mode Exit fullscreen mode

Set validation messages and properties name global for all instance of form group in the project

updateValidatorMessagesStorage({
  'The company name must be longer than 15': 'company name must be longer than 15 (translate on other language)',
});
updateValidatorTitlesStorage({ regionNum: 'number of region (translate property name in error on other language)' });
Enter fullscreen mode Exit fullscreen mode

Links

Demo with i18n - Simply sample of usage on multi-language.

Demo with i18n and transloco - Simply sample of usage on multi-language and integrations transloco.

class-validator-multi-lang - Fork of class-validator with support multi-language (typescript)

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (1)

Collapse
 
timi_cpeksi_b4abc61f00d31 profile image
timi cpeksi

Hello everyone! I would like to share my experience of using Melbet betting. As a person who has been fond of sports for many years, I am always looking for the best conditions for betting. And I can say with confidence that Melbet has exceeded all my expectations. The site offers excellent odds, as well as a large number of promotions and bonuses that help me make the most of my knowledge and intuition. In addition, I was pleasantly surprised by the speed of payouts and the level of security of the platform. If you also love sports and want to try your luck, Melbet is exactly what you need!

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay