TanStackT
TanStack•3mo ago•
24 replies
then-purple

How to fields disable when form submitting?

This is my reusable code and i try to add disable when submitting but it is not working. It update as true when submit click but not update again to false when validation error or submit finished.

I used this code to check it - {"Subminiting?:" + (field.form.state.isSubmitting === true ? "Yes" : "No")}

<Field
      data-invalid={field.state.meta.isTouched && !field.state.meta.isValid}
    >
      {label && <FieldLabel htmlFor={field.name}>{label || ""}</FieldLabel>}
      <Input
        value={field.state.value}
        type={type || "text"}
        name={field.name}
        id={field.name}
        placeholder={placeholder || ""}
        autoComplete={autoComplete}
        required={required ?? true}
        onBlur={field.handleBlur}
        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
          field.handleChange(e.target.value)
        }
        {...others}
        disabled={field.form.state.isSubmitting}
      />
      {"Subminiting?:" +
        (field.form.state.isSubmitting === true ? "Yes" : "No")}
      {console.log(field.form)}
      {description && <FieldDescription>{description}</FieldDescription>}
      {children}
      <FieldInfo field={field} />
    </Field>
Was this page helpful?