react-query-questions
solid-query-questions
table-questions
virtual-questions
router-questions
react-charts-questions
ranger-questions
vue-query-questions
svelte-query-questions
bling-questions
form-questions
angular-query-questions
start-questions
db-questions
start-showcase
router-showcase
đź“Ł-announcements
Field array validation not working correctly when field is removed
When a field array field is removed with a validation error on it, the field array that was +1 in the array shows the removed field's validation error, even tho the field previously did not have validation errors. It seems as tho validation is not running properly after an element is removed from the field array. I tried to call form.validateAllFields() after removing an element from the field array, but that leads to Uncaught (in promise) TypeError: Cannot read properties of undefined (reading...
Validate specific field on change
I have 2 date components, and on change for either, I would like to trigger validation on the other date component. I don’t want to trigger a full form validation. I have tried useField and the validate function with change and the value, but it doesn’t seem to trigger the validation for that field. Is this possible?
setValue onChange in TanStack Form (third party date time library (Dayjs) with Zod validation)
How do I set values in a TanStack form? I can't figure this out, and I've reached the limit of my ability to understand the documentation. This is a question that follows up the thread I have in<#1212550427372036116>
validateFormData in Solid Start Action
I'm currently testing out TanStack Form in SolidJS, and was trying to see how well I could get it working with the Actions built into Solid Start. Here's a code snippet of what I'm working with
```ts
var formFactory = createFormFactory(() => ({
defaultValues: {
username: "",...
Extracting the input element to make it reusable!
i this demo example everything works fine! But I need a way to extract out the input element into a separate component so that i don't need to write the input elelemnt again and again! But the problem becomes whever i tried to make a Field APi with general types the children prop of the form dont want to accept it! And normally i dont like using any it show a red mark (which is not that of a big deal) but something of personal preferrence!
```
import { useForm } from "@tanstack/react-form";
import ActionButton from "../../Common/Button/Button";
...
Zod Integration
Hey guys, is there a way of applying a zod schema "globally" to a form instead of applying the zod properties to each individual field. Something like
import { validateForm } from "./formValidator"
const form = useForm({
validatorAdapter: zodValidator(validateForm),...
Is there a dirty flag? (True if there is even one character in the form.)
Hi, actually I find tanstack form, and I try it now!
Is there a stable identifier for array fields?
I've been playing around with the library and liking it very much so far. I was surprised that to docs use the array index as key. See https://tanstack.com/form/latest/docs/guides/basic-concepts#array-fields
I wanted to to add a drag-and-drop reordering to my array fields but without a stable identifier it's almost impossible. So here are my questions:
- Is there an undocumented stable field identifier?
- If not, are there plans to add one?...
What's the recommended way to patch the entire form?
For example, if I'm using the same component to create/edit an entity, I want to replace the default values when there is data in the server for that entity.
How can I push the server data into the form?
Thanks....
Validate on change only after the first submit
Hi,
From my point of view, the best validation is done "on change" but only after the first submit. For instance, the first name must be minimum of 3 characters but I don't want to display an error as soon as the user starts typing their first character (or 2nd, which is still not enough to pass validation).
However, once the user has tried to submit the form, and is fixing all the errors, I want live feedback = on change....
creating a reusable styled form component
Hey, so I am working on creating a styled and aria friendly reusable form component using tanstack/react-form. I havent done that much yet because I am unsure of the best approach here. I am generally wondering if it is a bad approach to create a separate context for the form, and pass in formOptions. The plan is to create different styled form fields for a labeled input, checkbox etc with all predefined aria ids and styles. This is what I have so far, and it would be nice with some feedback if I am using the library correctly for this. I am also not completely sure if my type definition for the fromOptions is correct. Thanks for any help :)
```js
type FormProps = HTMLAttributes<HTMLFormElement> & {
formOptions: FormOptions<Record<string, unknown>, typeof zodValidator>;...
File still adds even if yup validation fails
```
validators={{
onChange: yup
.mixed()
.required("A photo ID selfie is required")...
How to manually set an error of the form
Hi guys, I'm look for a way to set error to the field from the backend. I don't see anything in API. Is it something with form.setFieldMeta?
In react-hook-form you can do setError("email", {type: "server", message: "Foo"})...
Understand the useForm.tsx file
I visited your source code, and I was a bit confused.
I noticed that this hook calls
useStore inside a function, which violates the React hooks rule, So how it possible to do that, and how it's stable?
thanks...
Is it possible to opt out of dot notation or escape dot for field names?
I'm considering migrating a project this library but there are field names containing dots x.y but these aren't to indicate nested fields.
Is there a way to opt-out of the path behavior? I do see the value in this feature but could there be a capability to escape the field names perhaps (e.g. x.y.z)?
I'm happy to contribute this feature but want to understand if any interest.
...
json scheme
Hello,
We want to replace a form builder we are using with TS form.
1- How can we implement json scheme support?
2- can these libraries help, or is there a simpler implementation? ...
Add/Delete fields in a form based on another field
Hi there!
I made a form with TanStack-Form / React (see video) where I manage the display of two extra fields if I select the "Good Til Time" option in my select list.
For the moment, the fields are flat and not nested, I just hide them and ignore their values in the submit, but it's not ideal....
How to render form fields based on result from an API call that uses value in previous form field ?
I have a form which requires and input domain. When domain is provided, I need to call and API and render other fields based on data received.
I thought of using form.Subscribe and then using useEffect in children component, but that throws error....
Appending / Removing Field values
Hello Tanstack friends,
I am working on a 'junk drawer' type application (kitchen sink is used elsewhere and well, typically you don't have two kitchen sinks).
I am migrating a app I have moved from Remix to Next now to Tanstack's suite of devtools. In Next I made pretty decent use of react hook form. ...
Form submit help
If my understanding is correct, button elements of type submit that are children of the form.Provider tag should trigger the
onSubmit call specified in useForm. I don't know why but I can't seem to trigger this console log...
```
export default function SigninForm({}) {
const form = useForm({...