DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

ILshat Khamitov
ILshat Khamitov

Posted on

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)

Top comments (0)

🌚 Life is too short to browse without dark mode