Required: true not working in many Form Items
Closed this issue · 0 comments
anserwaseem commented
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.