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

docs(solid-form): onChange listener -> onInput #1257

Merged
merged 3 commits into from
Mar 14, 2025
Merged

docs(solid-form): onChange listener -> onInput #1257

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
161b305
added a dummy DB and the support for showing how tanstack forms can b…
theVedanta Mar 8, 2025
d21f9f4
changed onChange -> onInput in SolidJS guides
theVedanta Mar 9, 2025
3d31950
Merge branch 'main' into solid-form-onchange-to-oninput
theVedanta Mar 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions docs/framework/solid/guides/basic-concepts.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -242,7 +242,7 @@ Example:
name={field().name}
value={field().state.value}
onBlur={field().handleBlur}
onChange={(e) => field().handleChange(e.target.value)}
onInput={(e) => field().handleChange(e.target.value)}
/>
<button
type="button"
Expand All @@ -264,7 +264,7 @@ Example:
name={field().name}
value={field().state.value}
onBlur={field().handleBlur}
onChange={(e) => field().handleChange(e.target.value)}
onInput={(e) => field().handleChange(e.target.value)}
/>
</div>
)
Expand Down
14 changes: 7 additions & 7 deletions docs/framework/solid/guides/validation.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ Here is an example:
name={field().name}
value={field().state.value}
type="number"
onChange={(e) => field().handleChange(e.target.valueAsNumber)}
onInput={(e) => field().handleChange(e.target.valueAsNumber)}
/>
{field().state.meta.errors ? (
<em role="alert">{field().state.meta.errors.join(', ')}</em>
Expand Down Expand Up @@ -61,8 +61,8 @@ In the example above, the validation is done at each keystroke (`onChange`). If,
type="number"
// Listen to the onBlur event on the field
onBlur={field().handleBlur}
// We always need to implement onChange, so that TanStack Form receives the changes
onChange={(e) => field().handleChange(e.target.valueAsNumber)}
// We always need to implement onInput, so that TanStack Form receives the changes
onInput={(e) => field().handleChange(e.target.valueAsNumber)}
/>
{field().state.meta.errors ? (
<em role="alert">{field().state.meta.errors.join(', ')}</em>
Expand Down Expand Up @@ -93,8 +93,8 @@ So you can control when the validation is done by implementing the desired callb
type="number"
// Listen to the onBlur event on the field
onBlur={field().handleBlur}
// We always need to implement onChange, so that TanStack Form receives the changes
onChange={(e) => field().handleChange(e.target.valueAsNumber)}
// We always need to implement onInput, so that TanStack Form receives the changes
onInput={(e) => field().handleChange(e.target.valueAsNumber)}
/>
{field().state.meta.errors ? (
<em role="alert">{field().state.meta.errors.join(', ')}</em>
Expand Down Expand Up @@ -242,7 +242,7 @@ To do this, we have dedicated `onChangeAsync`, `onBlurAsync`, and other methods
name={field().name}
value={field().state.value}
type="number"
onChange={(e) => field().handleChange(e.target.valueAsNumber)}
onInput={(e) => field().handleChange(e.target.valueAsNumber)}
/>
{field().state.meta.errors ? (
<em role="alert">{field().state.meta.errors.join(', ')}</em>
Expand Down Expand Up @@ -274,7 +274,7 @@ Synchronous and Asynchronous validations can coexist. For example, it is possibl
value={field().state.value}
type="number"
onBlur={field().handleBlur}
onChange={(e) => field().handleChange(e.target.valueAsNumber)}
onInput={(e) => field().handleChange(e.target.valueAsNumber)}
/>
{field().state.meta.errors ? (
<em role="alert">{field().state.meta.errors.join(', ')}</em>
Expand Down