4.14.0 • Published 5 days ago
@astral/validations-react-hook-form-resolver v4.14.0
@astral/validations-react-hook-form-resolver
Пакет позволяет произвести интеграцию @astral/validations и react-hook-form.
Installation
npm i --save @astral/validations @astral/validations-react-hook-form-resolver react-hook-form
yarn add @astral/validations @astral/validations-react-hook-form-resolver react-hook-form
Basic usage
Codesandbox
import { object, string, optional } from '@astral/validations';
import { resolver } from '@astral/validations-react-hook-form-resolver';
import { useForm } from 'react-hook-form';
type Values = {
name: string;
info: { description?: string }
};
const validationSchema = object<Values>({
name: string(),
info: object<Values['info']>({
description: optional(string()),
}),
});
const Form = () => {
const { register, handleSubmit, formState } = useForm<Values>({
resolver: resolver<Values>(validationSchema),
});
return (
<form onSubmit={handleSubmit(() => {})}>
<input {...register('name')} />
{formState.errors.name && (
<p>{formState.errors.name.message}</p>
)}
<input {...register('info.description')} />
{formState.errors.info?.description && (
<p>{formState.errors.info.description.message}</p>
)}
<button type="submit">submit</button>
</form>
);
};
With useFieldArray
import { object, string, optional } from '@astral/validations';
import { resolver } from '@astral/validations-react-hook-form-resolver';
import { useForm } from 'react-hook-form';
type ListItemValue = { name: string };
type Values = { list: Array<ListItemValue> };
const validationSchema = object<Values>({
list: array(
arrayItem(
object<ListItemValue>({
name: string()
})
)
),
});
const TestForm = () => {
const { register, handleSubmit, formState, control } = useForm<Values>({
resolver: resolver<Values>(validationSchema),
});
const { fields } = useFieldArray<Values>({ control, name: 'list' });
return (
<form onSubmit={handleSubmit(() => {})}>
{fields.map((field, index) => (
<div key={field.id}>
<input {...register(`list.${index}.name`)} />
<p>{formState.errors.list?.[index]?.name?.message}</p>
</div>
))}
<button type="submit">submit</button>
</form>
);
};
Переиспользуемый useForm
import { ObjectGuard, object, optional, string } from '@astral/validations';
import { resolver } from '@astral/validations-react-hook-form-resolver';
import {
FieldValues,
UseFormReturn,
UseFormProps as UseReactHookFormProps,
useForm as useReactHookForm,
} from 'react-hook-form';
type UseFormProps<TFieldValues extends FieldValues = FieldValues> = Omit<
UseReactHookFormProps<TFieldValues>,
'resolver'
> & {
validationSchema?: ObjectGuard<TFieldValues, TFieldValues>;
};
const useForm = <TFieldValues extends FieldValues = FieldValues>({
validationSchema,
defaultValues,
...params
}: UseFormProps<TFieldValues>): UseFormReturn<TFieldValues> =>
useReactHookForm<TFieldValues>({
...params,
defaultValues,
resolver: validationSchema && resolver(validationSchema),
});
type Values = {
name: string;
info: { description?: string };
};
const validationSchema = object<Values>({
name: string(),
info: object<Values['info']>({
description: optional(string()),
}),
});
const Form = () => {
const { register, handleSubmit, formState } = useForm<Values>({
validationSchema,
});
return (
<form onSubmit={handleSubmit(() => {})}>
<input {...register('name')} />
{formState.errors.name && <p>{formState.errors.name.message}</p>}
<input {...register('info.description')} />
{formState.errors.info?.description && (
<p>{formState.errors.info.description.message}</p>
)}
<button type="submit">submit</button>
</form>
);
};
4.14.0
5 days ago
4.13.3
2 months ago
4.13.2
4 months ago
4.13.1
5 months ago
4.12.0
6 months ago
4.13.0
6 months ago
4.11.0
7 months ago
4.9.0
8 months ago
4.8.1
8 months ago
4.8.0
8 months ago
4.9.2
7 months ago
4.9.1
8 months ago
3.2.2
10 months ago
3.3.0
10 months ago
4.5.0
8 months ago
4.4.0
9 months ago
4.7.0
8 months ago
4.6.1
8 months ago
4.6.0
8 months ago
4.1.0
9 months ago
4.0.0
9 months ago
4.3.0
9 months ago
4.2.0
9 months ago
4.10.1
7 months ago
4.10.0
7 months ago
3.2.1
11 months ago
3.2.0
11 months ago
3.1.1
11 months ago
3.1.0
11 months ago
3.0.0-beta.4
12 months ago
3.0.0-beta.3
12 months ago
3.0.0-beta.0
12 months ago