i18n Field Name translation is not working as expected in error messages.

[wescleveland56]

Describe the bug When using i18n options to translate text, labels are being properly translated but the field name in error messages is the original label (untranslated). This is working fine in the Formio.js jsFiddle environment when Formio is included from https://cdn.form.io/js/formio.embed.js but it is not working in the Formio.js sandbox using version 5.0.0-rc.91.

Version/Branch 5.0.0-rc.91

To Reproduce Steps to reproduce the behavior:

1. Open up the Formio.js sandbox at https://formio.github.io/formio.js/app/sandbox.html
2. Insert the following form Options JSON:

{
  "language": "en",
  "i18n": {
    "en": {
      "My Number": "My Value"
    }
  }
}

3. Insert the following Form JSON:

{
  "components": [
    {
      "label": "My Number",
      "applyMaskOn": "change",
      "mask": false,
      "tableView": false,
      "delimiter": false,
      "requireDecimal": false,
      "inputFormat": "plain",
      "truncateMultipleSpaces": false,
      "validate": {
        "required": true,
        "min": 0,
        "max": 999
      },
      "validateWhenHidden": false,
      "key": "myNumber",
      "type": "number",
      "input": true
    }
  ]
}

5. At this point, you should see that the field's label ("My Number") has been properly rendered as "My Value".
6. Type "9999" into the field.
7. The error message reads: "My Number cannot be greater than 999."
8. Type "-1" into the field.
9. The error message reads: "My Number cannot be less than 0."
10. Delete the contents of the field.
11. The error message reads: "My Number is required"

Expected behavior The expected behavior is that "My Number" in error messages would be translated to "My Value" as happens at https://jsfiddle.net/qa24u7gt/

[wescleveland56]

Consider the following unit test addition to Webform.unit.js:

it('Should translate form field names in alerts', () => {
    const formElement = document.createElement('div');
    const form = new Webform(formElement, {
      language: 'es',
      i18n: {
        es: {
          'Field Label': 'Etiqueta de campo',
          required: '{{field}} es obligatorio'
        }
      }
    });

    return form.setForm({
      components: [
        {
          type: 'textfield',
          label: 'Field Label',
          key: 'myfield',
          input: true,
          inputType: 'text',
          validate: {
            required: true
          }
        }
      ]
    })
      .then(() => form.submit())
      .catch(() => {
        // console.warn('nooo:', error)
      })
      .then(() => {
        const ref = formElement.querySelector('[ref="errorRef"]');
        assert.equal(ref.textContent.trim(), 'Etiqueta de campo es obligatorio');
      });
  });

[VikkiAlenn]

Thank you for your contribution. We created a ticket for our dev team to review. For the reference: FIO-9354