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)',
      },
    },
  }
);

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)',
  },
});

Set translate property name in error

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

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)' });

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)