Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Value of number type input #361

Closed
YagamiNewLight opened this issue Dec 13, 2017 · 2 comments · Fixed by #363
Closed

Value of number type input #361

YagamiNewLight opened this issue Dec 13, 2017 · 2 comments · Fixed by #363

Comments

@YagamiNewLight
Copy link

YagamiNewLight commented Dec 13, 2017 •
edited
Loading

I saw the way of getting value of a number type input is using "this.value".
And problems happened:
when the user enter like this "10e10",this will be OK
But when they continue to type just like this "10e10ee.12e12e12e.12e21e".Obviously,this input is not a valid number,but the "this.value" equals to the Empty string,And looks like you guys converted the string to number.So the empty string will be converted to 0. And if we set a negative min/max value,the “10e10ee.12e12e12e.12e21e” will be passed, because 0 is greater than negative value.This is not what we expect.So maybe you can use the "this.valueAsNumber".In this way,the "10e10ee.12e12e12e.12e21e" will be pasred to NaN .And we can handle the error condition more clearly .
zoul0813 added a commit to zoul0813/vue-form-generator that referenced this issue Dec 13, 2017
@zoul0813
fixes vue-generators#361 - use $event.target.valueAsNumber for number…
d1a8bcf 
…/range inputs, debounce `formatValueToModel` for number/range, removed `formatValueToField`

Number inputs now support `10e10` formats being typed in, and stores the evaluated value of `10e10` (`100000000000`) on the model.

* moved debouncedFormatDateTime to abstractField and renamed to debounceFormatFunc
* create a `debounceFormatFunc` for number/range inputs, as well as date/datetime/datetime-local
* changed @input to use `onInput` handler which checks for number/range and uses $event.target.valueAsNumber per @YgamiLight
* set value to NaN if !isNumber(value) (NOTE: NaN is represented as "null" in JSON though as JSON does not support NaN/Infinity)
* set all `inputType` checks and uses to use `inputType.toLowerCase()`, recommend doing this for all fields
* created DEBOUNCE_FORMAT_MS constants in inputField.vue, set to default of 1000 ... recommend turning this into a standard schema option for all fields
* wrapped one-liner conditionals with `{}` (just looks cleaner)
@zoul0813 zoul0813 mentioned this issue Dec 13, 2017
Merged
@zoul0813
Copy link
Member

@YgamiLight can you check out PR #363 and let me know if this will solve the issue you're reporting? It uses the same debounced format logic I introduced yesterday for date/datetime inputs to allow users to enter valid values into the HTML5 inputs and it looks at valueAsNumber for the input element of number/range inputs per your suggestion.

The model will have the value NaN stored on it, but this will be translated to null when converted to JSON as JSON does not support NaN/Infinity ...

zoul0813 added a commit that referenced this issue Dec 13, 2017
@zoul0813
Merge pull request #363 from zoul0813/feature/361-fix-number-values
2b579cd 
fixes #361
zoul0813 added a commit to zoul0813/vue-form-generator that referenced this issue Dec 13, 2017
@zoul0813
Merge branch 'master' of https://github.com/icebob/vue-form-generator …
67fc382 
…into feature/362-integer-validator

* 'master' of https://github.com/icebob/vue-form-generator:
  fixes vue-generators#361 - use $event.target.valueAsNumber for number/range inputs, debounce `formatValueToModel` for number/range, removed `formatValueToField`

# Conflicts:
#	dist/vfg-core.js
#	dist/vfg.js
zoul0813 added a commit to zoul0813/vue-form-generator that referenced this issue Dec 13, 2017
@zoul0813
Merge branch 'master' of https://github.com/icebob/vue-form-generator …
24671a1 
…into feature/340-select-none

* 'master' of https://github.com/icebob/vue-form-generator:
  fixes vue-generators#362 - `integer` validator now calls `number` validator, and returns `invalidIntegerl: "The value is not an integer"` as well as any errors generated by `number`
  fixes vue-generators#361 - use $event.target.valueAsNumber for number/range inputs, debounce `formatValueToModel` for number/range, removed `formatValueToField`

# Conflicts:
#	dist/vfg-core.js
#	dist/vfg.js
zoul0813 added a commit to zoul0813/vue-form-generator that referenced this issue Dec 13, 2017
@zoul0813
Merge branch 'master' into develop
19c4929 
* master:
  reverting back to original test
  reverted back to `schema.required` for "none selected" disabled state, per @icebob
  fixes vue-generators#340 - "none" value set to `null`, formatValueToField checks for `isNil(value)` and returns `null`, none options are always disabled
  fixes vue-generators#362 - `integer` validator now calls `number` validator, and returns `invalidIntegerl: "The value is not an integer"` as well as any errors generated by `number`
  fixes vue-generators#361 - use $event.target.valueAsNumber for number/range inputs, debounce `formatValueToModel` for number/range, removed `formatValueToField`
  added missing comma that failed in Travis
  requested by @icebob
  fixes vue-generators#341 - introduced debounce functionality into `formatValueToModel`

# Conflicts:
#	dist/vfg-core.js
#	dist/vfg.js
#	package-lock.json
@YagamiNewLight
Copy link
Author

Fixed,thank you

@lionel-bijaoui lionel-bijaoui mentioned this issue Jun 27, 2018
Merged
3 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fixes #361 - use $event.target.valueAsNumber for number/range inputs,… zoul0813/vue-form-generator
2 participants
@zoul0813 @YagamiNewLight