TheLazy.Dev
Portfolio GitHub

Blog

angular |form |i18n |validator

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

endykaufman

ILshat Khamitov

Posted on September 13, 2020

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)

💖 💪 🙅 🚩
endykaufman
ILshat Khamitov

Posted on September 13, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

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

September 13, 2020