Comments (4)
I want to use two forms on one page.
I tried to give each form a different action target <Form action='/api/change/email'
but this caused other errors if the action is not on the same route.
I also tried to use the or function
from zod but formAction
from remix-forms can't work with it.
So my last idea was to call the mutation based on a hidden field. something like this:
import { ActionFunction, json } from "@remix-run/server-runtime"
import { InputError, makeDomainFunction } from "remix-domains"
import { Form, formAction } from "remix-forms"
import { z } from "zod"
const emailSchema = z.object({
type: z.string().nonempty(),
email: z.string().nonempty().email(),
})
const takenEmails = ["[email protected]", "[email protected]"]
const emailMutation = makeDomainFunction(emailSchema)(async (values) => {
if (takenEmails.includes(values.email)) {
throw new InputError("Email already taken", "email")
}
return values
})
const passwordSchema = z.object({
type: z.string().nonempty(),
password: z.string().nonempty(),
confirmPassword: z.string().nonempty(),
})
const passwordMutation = makeDomainFunction(passwordSchema)(async (values) => {
if (values.password !== values.confirmPassword) {
throw new InputError("Password does not match", "confirmPassword")
}
return values
})
export const action: ActionFunction = async ({ request }) => {
const formData = await request.formData()
let type = formData.get("type")
switch (type) {
case "CHANGE_EMAIL":
return formAction({
request,
schema: passwordSchema,
mutation: passwordMutation,
})
case "CHANGE_PASSWORD":
return formAction({
request,
schema: emailSchema,
mutation: emailMutation,
})
default:
return json("type missing", 400)
}
}
export default () => (
<div>
<Form schema={emailSchema} hiddenFields={["type"]} values={{ type: "CHANGE_EMAIL" }} />
<Form schema={passwordSchema} hiddenFields={["type"]} values={{ type: "CHANGE_PASSWORD" }} />
</div>
)
from remix-forms.
Regarding the issue title, try with const formData = await request.clone().formData()
.
from remix-forms.
I tried your strategy of using the same action for both forms. I went past the cloning error, but there's something else happening because when I submit one form, the other one also gets client-side validation.
It can be something related to react-hook-form, we'll leave this issue open until we can figure it out.
In the meantime, the strategy of using different actions for each form is working and it's the one we use and recommend :) Do you want to dig into the errors you had using separate actions?
from remix-forms.
I'm closing this since it's a known behaviour of formData
and there are plenty of workarounds (some already described in the thread)
from remix-forms.
Related Issues (20)
- Inconsistent display of selected option in select control HOT 4
- Custom Component typings HOT 2
- Error: Cannot submit element that is not <form>, <button>, or <input type="submit|image"> HOT 1
- Multiple Checkboxes HOT 3
- Define Input type through fieldTypes HOT 5
- Bring `errorMessagesForSchema` from `domain-functions` to this library HOT 1
- form with mode="onChange" button flashes when it hydrates HOT 2
- Could not resolve "@deepkit/type" HOT 3
- Overriding fields HOT 2
- <Field hidden /> is not passing `type="hidden"` to its input
- Validation error not shown when field is an array
- Can't trigger onSubmit from Form-component HOT 6
- Handle `z.object` HOT 1
- Can remix-forms function within a PWA / client side only context? HOT 4
- Zod schema array of objects HOT 1
- Remix forms site example no longer maintained? HOT 1
- [BUG] Field error(s) not showing if using additional component HOT 1
- Input ID's not always unique when multiple forms are rendered
- Example of how to do crud correctly?
- How to add a reset button on the side of the submit button? HOT 1
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 remix-forms.