Example of using reset for @modular-forms/solid

[amirsaf1]

Hi Fabian,

Would you be able to provide example of how to use "reset"?

I need to make my form editable and so when the user clicks on edit button, the form should be reset and user can provide new input.

Thanks.

[amirsaf1]

const [userForm, { Form, Field, reset }] = createForm({ ... });

const startEdit = () => {
if (currentUser()) {
reset({
email: user!.email,
firstName: currentUser().firstName,
lastName: currentUser().lastName,
phoneNumber: Number(currentUser().phoneNumber),
});
}
setEditMode(true);
};

[amirsaf1]

i got error:

Property 'reset' does not exist

[bedweyy]

import { reset } from "@modular-forms/solid";

Resets the entire form, several fields and field arrays or a single field or field array.

// Reset the entire form
reset(form, options);

// Reset a single field or field array
reset(form, name, options);

// Reset several fields and field arrays
reset(form, names, options);

example

import { createForm, reset, valiForm } from "@modular-forms/solid";
import * as v from "valibot";
import { TextField } from "@/components/common/text-field";
import { Button } from "@/components/ui/button";

const LoginSchema = v.object({
	phone: v.pipe(v.string(), v.minLength(11, "Min 11 len")),
});

export type LoginForm = v.InferInput<typeof LoginSchema>;

export default function LoginRoute() {
	const [loginForm, { Form, Field }] = createForm<LoginForm>({
		validate: valiForm(LoginSchema),
		initialValues: {
			phone: "",
		},
	});

	const handleSubmit = (values: LoginForm) => {
		console.log("Form submitted with values:", values);

		// Reset the form after submission
		reset(loginForm);
	};

	return (
		<Form class="grid gap-3" onSubmit={handleSubmit}>
			<Field name="phone">
				{(field, props) => (
					<TextField
						{...props}
						type="tel"
						label="phone"
						placeholder="01"
						value={field.value}
						error={field.error}
						required
					/>
				)}
			</Field>
			<Button type="submit">Login</Button>
		</Form>
	);
}

[fabian-hiller]

Make sure to make your form field controlled when using reset.