widgetti / widgetti/ipyvuetify
TextField with `type='number'` - decimal separator and validation
Nobody has claimed this yet.
- Dominant language
- Python
- Stars
- 355
- Forks
- 61
- PR merge metrics
- No merged PRs in 30d
Description
Hi, I've just started out with ipyvuetify and I'm looking for how to make a form for a user to input a float value.
I'm using this:
f = v.TextField(v_model = 0.2, type='number', attributes={'min': 0, 'max': 1, 'step': 0.1})
The output is this:

But when click the spinbox I get this:

Why does the type and decimal separator change here? Is there something I can do to keep the separator . and the value of v_model a float?
Second, I'm trying to make it reject text or show some feedback if the value entered cannot be converted to a float. I don't have JS experience so I've scrounged the issue pages and tried the code below, but there is something with the :rules part that doesnt work.
class MyNumberField(v.VuetifyTemplate):
label = traitlets.Unicode().tag(sync=True)
value = traitlets.Unicode(default_value='0').tag(sync=True)
min = traitlets.Float(default_value=0).tag(sync=True)
max = traitlets.Float(default_value=1).tag(sync=True)
step = traitlets.Float(default_value=1).tag(sync=True)
temp = traitlets.Float()
temp_error = traitlets.Unicode(default_value=None)
@traitlets.default('template')
def _template(self):
return '''
<v-text-field
:label="label"
type="number"
v-model="value"
@change="temp_rule"
:rules="[temp_error]"
:min="min" :max="max" :step="step"
@input="input($event)"
></v-text-field>
'''
def vue_temp_rule(self, v):
self.temp_error = None
try:
self.temp = float(v)
except:
self.temp_error = 'testtest'
def vue_input(self, data):
print(data)
mf = MyNumberField()
mf
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the v.TextField configuration and the MyNumberField template shown in the issue; compare browser number-input behavior with the synchronized Python traits and Vuetify rules. Reproduce decimal-separator and invalid-input cases, then confirm that the result preserves the intended float value and provides validation feedback.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, jupyter, python
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100