4.16.0 • Published 10 months ago
@astral/validations-react-hook-form-resolver v4.16.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.15.0
10 months ago
4.16.0
10 months ago
4.15.1
10 months ago
4.14.5
11 months ago
4.14.6
11 months ago
4.14.1
1 year ago
4.14.2
1 year ago
4.14.3
1 year ago
4.14.4
11 months ago
4.14.0
1 year ago
4.13.3
1 year ago
4.13.2
1 year ago
4.13.1
2 years ago
4.12.0
2 years ago
4.13.0
2 years ago
4.11.0
2 years ago
4.9.0
2 years ago
4.8.1
2 years ago
4.8.0
2 years ago
4.9.2
2 years ago
4.9.1
2 years ago
3.2.2
2 years ago
3.3.0
2 years ago
4.5.0
2 years ago
4.4.0
2 years ago
4.7.0
2 years ago
4.6.1
2 years ago
4.6.0
2 years ago
4.1.0
2 years ago
4.0.0
2 years ago
4.3.0
2 years ago
4.2.0
2 years ago
4.10.1
2 years ago
4.10.0
2 years ago
3.2.1
2 years ago
3.2.0
2 years ago
3.1.1
2 years ago
3.1.0
2 years ago
3.0.0-beta.4
2 years ago
3.0.0-beta.3
2 years ago
3.0.0-beta.0
2 years ago