Form() — astro Function Reference

Architecture documentation for the Form() function in Form.tsx from the astro codebase.

Function tsx CoreAstro RenderingEngine calls 1

Entity Profile

CoreAstro→ RenderingEngine→ Form() — astro Function Reference

Dependency Diagram

graph TD
  4ced467d_2434_ded6_1c62_a6986a7078d5["Form()"]
  6986db32_b74e_37a6_ff49_3275e975c4fb["Form.tsx"]
  4ced467d_2434_ded6_1c62_a6986a7078d5 -->|defined in| 6986db32_b74e_37a6_ff49_3275e975c4fb
  0e3306c4_c06c_bf72_6ed2_778d37c0e0fa["useCreateFormContext()"]
  4ced467d_2434_ded6_1c62_a6986a7078d5 -->|calls| 0e3306c4_c06c_bf72_6ed2_778d37c0e0fa
  style 4ced467d_2434_ded6_1c62_a6986a7078d5 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/db/test/fixtures/ticketing-example/src/components/Form.tsx lines 43–85

export function Form({
	children,
	validator,
	context,
	fieldErrors,
	name,
	...formProps
}: {
	validator: FormValidator;
	context?: FormContextType;
	fieldErrors?: FieldErrors;
} & Omit<ComponentProps<'form'>, 'method' | 'onSubmit'>) {
	const formContext = context ?? useCreateFormContext(validator, fieldErrors);

	return (
		<FormContext.Provider value={formContext}>
			<form
				{...formProps}
				method="POST"
				onSubmit={async (e) => {
					e.preventDefault();
					e.stopPropagation();
					const formData = new FormData(e.currentTarget);
					formContext.set((formState) => ({
						...formState,
						isSubmitPending: true,
						submitStatus: 'validating',
					}));
					const parsed = await validateForm({ formData, validator });
					if (parsed.data) {
						navigate(formProps.action ?? '', { formData });
						return formContext.trackAstroSubmitStatus();
					}

					formContext.setValidationErrors(parsed.fieldErrors);
				}}
			>
				{name ? <input {...formNameInputProps} value={name} /> : null}
				{children}
			</form>
		</FormContext.Provider>
	);
}