Show validation error(s) on form items using its label, and not the id

[anserwaseem]

Describe the bug When a validation error is shown for any form item e.g. TextInput, Dropdown, we use widget's id to show the error e.g.,

We need to show the error using its label instead.

To Reproduce Checkout this yaml:

View:
  onLoad:
    executeCode:
      body: |
        ensemble.storage.set('inputVal', 'sagar')
        ensemble.storage.set('dummyData', [
          { value: "val 1", label: "lab 1" },
          { value: "val 2", label: "lab 2" },
          { value: "val 3", label: "lab 3" },
        ]);
      onComplete:
        invokeAPI:
          name: getData
          onResponse:
            executeCode: |
              console.log('getData', response.body)

  body:
    Form:
      styles:
        gap: 8px
        labelPosition: top
      children:
        - Radio:
            id: radio
            label: Radio Group
            required: true
            items:
              - label: Option 1
                value: 1
                enabled: false
              - label: Option 2
                value: 2
              - label: Option 3
                value: 3
            onChange:
              executeCode: |
                console.log('radio changed', value)
        # Build your own checkbox group
        - Row:
            item-template:
              data: [0, 1, 2]
              name: cd
              template:
                Checkbox:
                  id: ${'cb' + cd}
                  trailingText: ${'Check me' + cd}
                  onChange:
                    executeCode: |-
                      console.log('isChecked', value);
        - Dropdown:
            id: dropdown
            label: My Dropdown
            hintText: Choose One
            value: option2
            required: true
            items:
              - label: Option 1
                value: option1
              - label: Option 2
                value: option2
        # If you omit id, the form value key will be the label
        - TextInput:
            id: formTextInput
            value: abc
            hintText: (123) 456-7890
            mask: "(###) ###-####"
            inputType: phone
            required: true
            label:
              Text:
                text: Text input
        - TextInput:
            id: minMaxTextInput
            inputType: email
            validator:
              minLength: 4
              maxLength: 10
            required: true
            label: Email input with min and max length
        - TextInput:
            id: regexTextInput
            validator:
              regex: "[0-5]"
              regexError: "Only numbers 0 to 5 are allowed"
            required: true
            label: Text input with regex
        - MultiSelect:
            id: multiselectoptions1
            label: Choose multiple from API or storage
            placeholder: "Select From Groups"
            value: ["hbingley1@plala.or.jp", "val 2"]
            labelKey: firstName
            valueKey: email
            items: ${ensemble.storage.get('dummyData')}
            allowCreateOptions: true
            required: true
            onItemSelect:
              executeCode: |
                console.log('selected', multiselectoptions1);
                console.log(1,selectedValues)
                console.log(1,multiselectoptions1.selectedValues)
        - MultiSelect:
            id: multiselectoptions2
            label: Choose multiple
            required: true
            data:
              - label: Option 1
                value: option1
              - label: Option 2
                value: option2
        - Date:
            id: date0
            label: Date 0
            hintText: Choose date 0
            required: true
        - Date:
            id: date1
            label: Date 1
            value: ""
            hintText: Choose date 1
        - Date:
            id: date2
            label: Date 2
            value: "2024/04/04"
            hintText: Choose date 2
        - Button:
            submitForm: true
            label: Submit

API:
  getData:
    method: GET
    uri: https://dummyjson.com/users

Expected behavior Validation error should prioritize label for showing validation error.

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context Add any other context about the problem here.

[sagardspeed2]

@anserwaseem Can you please provide me your YAML ?

[anserwaseem]

@anserwaseem Can you please provide me your YAML ?

added.