Comments (14)
This is because <select />
cannot return numbers as values. Modular Forms builds on the functionality of the native HTML form elements here.
from modular-forms.
That's why I wrapped the calls in JSON.stringify
. Shouldn't this still work?
from modular-forms.
This has no effect on it. Modular Forms can only capture a data type if it is supported by the HTML element being used and <select />
can only return strings. To maintain type safety, Modular Forms simply does not capture a value in this case. Here is the implementation: https://github.com/fabian-hiller/modular-forms/blob/main/packages/qwik/src/utils/getElementInput.ts
from modular-forms.
Hmmm okay. Is there another way to build (for instance) a date picker around Modular Forms, if the input element is of type Date
for instance? Or maybe just a number field.
from modular-forms.
Yes, I think this is possible. For custom input elements, setValue
can also be used to capture inputs.
from modular-forms.
I see. In that case, would I have a component which takes in a Form
as a prop for this to work?
from modular-forms.
My dilemma is how I preserve the strong-typing inside the component.
from modular-forms.
You can also simply provide an onInput$
prop where you then call setValue
directly in your form. This way you won't have any typing issues and your component will remain independent of Modular Forms.
from modular-forms.
Alright.
What I ended up with now is a component that looks like this:
<Select
form={form}
fieldPath="durationInMinutes"
options={getDurationsInMinutes().map(durationInMinutes => ({
label: getLabelFromDurationInMinutes(durationInMinutes),
value: durationInMinutes
}))}
label="Duration"
/>
The fieldPath
and form
is strong-typed. However, when I call setValue(form, fieldPath, value)
, no value is set (confirmed by retrieving it again using getValue(form, fieldPath)
).
Any ideas what may be causing this?
from modular-forms.
Is your component enclosed by the Field
component? Is it perhaps related to the active
state? Feel free to ask me any questions you may have. Otherwise I need a code example to investigate the problem.
from modular-forms.
Ah no. It's not. I keep forgetting that. Would be awesome if that was a runtime error.
To be honest, I don't think that adds a lot to the bundle size. People today don't care much about a 30 byte difference in libraries. It has neglectable performance difference compared to the things we install also.
from modular-forms.
Thanks for your feedback. I will consider it as soon as I have some more time for Modular Forms.
I recommend to always enclose a field with the Field
component. This makes it easier to control your form field and display error messages.
from modular-forms.
Great stuff. I love your work.
I've been using getValue a lot lore by the way. I've not had one single case where I didn't need to set shouldActive to false. Sorry to bring that up again, just thought the new info would be helpful.
Not sure how I can fix that with this component too. Is it because I'm missing some other calls?
from modular-forms.
Thanks a lot! A new open source project will follow soon, which can be used together with Modular Forms.
If you send me a simple code example, I can take a look at it.
from modular-forms.
Related Issues (20)
- Qwik: Latest qwik release breaks types HOT 14
- Enhance FieldStore to Return Multiple Errors per Field HOT 2
- Phone Number Input HOT 1
- Allow setting initial form values of a mounted component HOT 2
- Preact: What is the best method to pull values of fields in the form for using in computed() HOT 4
- [Question] Is it possible to have optional fields? HOT 7
- Import error in formAction for qwik HOT 1
- Checkbox works improperly when use modular forms with kobalte HOT 7
- [Question] Is it possible to have custom input without ref? HOT 5
- When useFormStore is in a seperate file, it fails HOT 1
- Select component with number types HOT 3
- Using modular form Fields inside solidjs Dynamic component HOT 1
- Qwik: Vite is trying to externalize packages used in formAction$ HOT 3
- `requestSubmit` is not a function on Safari < 16 HOT 3
- Does this library support React Native? HOT 1
- Internal issue: Cannot read properties of null (reading 'internal') HOT 4
- SolidJS: Form reset action doesn't preventDefault like submit does. HOT 1
- [Qwik] Form state is reset after action returns an error HOT 1
- [React]: Preact Signals Dependency Update HOT 11
- [SolidJS]: How to handle errors from server? HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from modular-forms.