FIO-9354: Fix custom translation not applied to error message

src/utils/i18n.js

@@ -83,6 +83,10 @@ export class I18n {
 
     t(text, ...args) {
         if (this.currentLanguage[text]) {
+            const customTranslationFieldName = args[0]?.field;
+            if (customTranslationFieldName && this.currentLanguage[customTranslationFieldName]) {
+                args[0].field = this.currentLanguage[customTranslationFieldName]
+            }
             return Evaluator.interpolateString(this.currentLanguage[text], ...args);
         }
         return Evaluator.interpolateString(text, ...args);

test/forms/translationErrorMessages.js

@@ -0,0 +1,25 @@
+export default {
+	name: "textrandom",
+	path: "textrandom",
+	type: "form",
+	display: "form",
+	components: [
+		{
+			label: "My textField",
+			applyMaskOn: "change",
+			tableView: true,
+			validate: {
+				minLength: 5,
+				minWords: 2
+			},
+			validateWhenHidden: false,
+			key: "textField",
+			type: "textfield",
+			input: true
+		},
+	],
+	created: "2024-11-14T15:52:30.402Z",
+	modified: "2024-11-15T07:03:41.301Z",
+	machineName: "glvmkehegcvqksg:text",
+}
+

test/unit/Webform.unit.js

@@ -86,6 +86,7 @@ import webformWithNestedWizard from '../forms/webformWIthNestedWizard';
 import formWithUniqueValidation from '../forms/formWithUniqueValidation.js';
 import formWithConditionalEmail from '../forms/formWithConditionalEmail.js';
 import formsWithSimpleConditionals from '../forms/formsWithSimpleConditionals.js';
+import translationErrorMessages from '../forms/translationErrorMessages.js';
 const SpySanitize = sinon.spy(FormioUtils, 'sanitize');
 
 if (_.has(Formio, 'Components.setComponents')) {
@@ -928,6 +929,29 @@ describe('Webform tests', function() {
     }).catch(done);
   });
 
+  it('Should translate field name in error messages', (done) => {
+    const element = document.createElement('div');
+    const form = new Webform(element, {
+      language: 'en',
+      i18n: {
+        en: {
+          'My textField': 'My Value'
+        },
+      }
+    });
+    form.setForm(translationErrorMessages).then(() => {
+      const textField = form.getComponent('textField');
+      textField.setValue('123');
+      textField.onChange()
+      setTimeout(() => {
+        assert.equal(form.errors.length, 2);
+        assert.equal(form.errors[0].message, 'My Value must have at least 5 characters.');
+        assert.equal(form.errors[1].message, 'My Value must have at least 2 words.');
+        done();
+      }, 300);
+    }).catch(done);
+  });
+
   it('Should translate value in franch if _userInput option is provided and value does not present in reserved translation names', done => {
     const formElement = document.createElement('div');
     const selectLabel = 'Select test label';