useForm
Creates a reactive form store from a form configuration. The form store manages form state and provides reactive properties.
const form = useForm<TSchema>(config);Generics
TSchemaextends FormSchema
Parameters
configFormConfig<TSchema>
Explanation
useForm creates a reactive form store that manages form state using the provided Valibot schema. Validation runs when the form is submitted by default, after which fields revalidate on every input, but this can be customized with the validate and revalidate options.
Since React Native has no native form element or submit event, there is no <Form /> component. Instead, submission is triggered explicitly with the handleSubmit method, for example from a button's onPress or a text input's onSubmitEditing handler.
Returns
formFormStore<TSchema>
Examples
The following examples show how useForm can be used.
Login screen
import { Field, handleSubmit, useForm } from '@formisch/react-native';
import { Button, Text, TextInput, View } from 'react-native';
import * as v from 'valibot';
const LoginSchema = v.object({
email: v.pipe(v.string(), v.email()),
password: v.pipe(v.string(), v.minLength(8)),
});
export default function LoginScreen() {
const loginForm = useForm({
schema: LoginSchema,
});
const submitForm = handleSubmit(loginForm, (output) => console.log(output));
return (
<View>
<Field of={loginForm} path={['email']}>
{(field) => (
<View>
<TextInput {...field.props} value={field.input} />
{field.errors && <Text>{field.errors[0]}</Text>}
</View>
)}
</Field>
<Field of={loginForm} path={['password']}>
{(field) => (
<View>
<TextInput {...field.props} value={field.input} secureTextEntry />
{field.errors && <Text>{field.errors[0]}</Text>}
</View>
)}
</Field>
<Button title="Login" onPress={submitForm} />
</View>
);
}Initial input
const profileForm = useForm({
schema: ProfileSchema,
initialInput: {
name: 'Jane Doe',
email: 'jane@example.com',
},
});Validation timing
const signUpForm = useForm({
schema: SignUpSchema,
validate: 'blur',
revalidate: 'input',
});Related
The following APIs can be combined with useForm.