📄 Form Component
Usage example
- React Web
const { control, register, formState: { isSubmitSuccessful, errors } } = useForm({
// progressive: true, optional prop for progressive enhancement
});
<Form action="/api" control={control}>
<input {...register('name')} />
{isSubmitSuccessful && <p>Form submit successful.<p>}
{errors?.root?.server && <p>Form submit failed.</p>}
<button>submit</button>
</Form>- React Native
const { control, register, formState: { isSubmitSuccessful, errors } } = useForm();
<Form action="/api" control={control} render={({ submit }) => {
<View>
{isSubmitSuccessful && <Text>Form submit successful.<Text>}
{errors?.root?.server && <Text>Form submit failed.</Text>}
<Button onPress={() => submit()} />
</View>
}}/>Types
- Component props
export type FormProps<
T extends FieldValues,
U extends FieldValues | undefined = undefined,
> = Partial<{
control: Control<T>;
children?: React.ReactNode | React.ReactNode[];
render?: (props: {
submit: (e?: React.FormEvent) => void;
}) => React.ReactNode | React.ReactNode[];
onSubmit: U extends FieldValues ? SubmitHandler<U> : SubmitHandler<T>;
onSuccess: ({ response }: { response: Response }) => void;
onError: ({
response,
error,
}:
| {
response: Response;
error?: undefined;
}
| {
response?: undefined;
error: unknown;
}) => void;
headers: Record<string, string>;
validateStatus: (status: number) => boolean;
}> &
Omit<React.FormHTMLAttributes<HTMLFormElement>, 'onError'>;