EnsembleUI/ensemble-react

Required: true not working in many Form Items

Closed this issue · 0 comments

Describe the bug
try to submit the form (yaml given below).
It should not be submitted and give a validation error - it doesn't work for widgets:

  • Dropdown
  • MultiSelect
  • Date
  • Radio
  • Checkbox

To Reproduce
Steps to reproduce the behavior:

   Form:
                  id: myForm
                  styles:
                    gap: 8px
                    labelPosition: top
                  onSubmit:
                    executeCode:
                      body: |
                        console.log(vals)
                        const formattedVals = JSON.stringify(vals, null, 2)
                        console.log(formattedVals)
                        result.setText(formattedVals)
                      onComplete:
                        showToast:
                          message: Form submitted!
                  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}
                              label: ${'Check me label' + cd}
                              required: true
                              onChange:
                                executeCode: |-
                                  console.log('isChecked', value);
                    - Dropdown:
                        id: dropdown
                        label: Dropdown
                        hintText: Choose One
                        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: ${ensemble.storage.get('inputVal')}
                        hintText: (123) 456-7890
                        # mask: "(###) ###-####"
                        inputType: phone
                        required: true
                        label:
                          Text:
                            text: Text input
                    - TextInput:
                        id: minMaxTextInput
                        validator:
                          minLength: 4
                          maxLength: 10
                        label: Text input with min and max length
                    - TextInput:
                        id: regexTextInput
                        validator:
                          regex: "[0-5]"
                          regexError: "Only numbers 0 to 5 are allowed"
                        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"]
                        data: getData.body.users
                        labelKey: firstName
                        valueKey: email
                        items: ${ensemble.storage.get('dummyData')}
                        allowCreateOptions: 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
                    - Button:
                        label: Reset
                        onTap:
                          executeCode: |
                            myForm.reset()
                    - Button:
                        label: Clear
                        onTap:
                          executeCode: |
                            myForm.clear()
              

Expected behavior
A clear and concise description of what you expected to happen.

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.