@astral/validations 4.26.0 → 4.26.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +8 -100
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2185,112 +2185,20 @@ toPrettyError(result);
|
|
|
2185
2185
|
|
|
2186
2186
|
# Integrations
|
|
2187
2187
|
|
|
2188
|
-
|
|
2188
|
+
Пакет `@astral/ui` поддерживает схему валидации с помощью хука `useForm`
|
|
2189
2189
|
|
|
2190
|
-
|
|
2191
|
-
|
|
2192
|
-
|
|
2193
|
-
|
|
2194
|
-
### Basic usage
|
|
2195
|
-
|
|
2196
|
-
```tsx
|
|
2197
|
-
import { object, string, optional } from '@astral/validations';
|
|
2198
|
-
import { resolver } from '@astral/validations-react-hook-form-resolver';
|
|
2199
|
-
import { useForm } from 'react-hook-form';
|
|
2200
|
-
|
|
2201
|
-
type Values = {
|
|
2202
|
-
name: string;
|
|
2203
|
-
info: { description?: string }
|
|
2204
|
-
};
|
|
2205
|
-
|
|
2206
|
-
const validationSchema = object<Values>({
|
|
2190
|
+
```typescript
|
|
2191
|
+
const validationSchema = object<FormValues>({
|
|
2192
|
+
lastName: string(),
|
|
2207
2193
|
name: string(),
|
|
2208
|
-
|
|
2209
|
-
|
|
2210
|
-
|
|
2194
|
+
patronymic: optional(string()),
|
|
2195
|
+
phone: string(mobilePhone()),
|
|
2196
|
+
email: string(email()),
|
|
2211
2197
|
});
|
|
2212
2198
|
|
|
2213
|
-
const
|
|
2214
|
-
const { register, handleSubmit, formState } = useForm<Values>({
|
|
2215
|
-
resolver: resolver<Values>(validationSchema),
|
|
2216
|
-
});
|
|
2217
|
-
|
|
2218
|
-
return (
|
|
2219
|
-
<form onSubmit={handleSubmit(() => {})}>
|
|
2220
|
-
<input {...register('name')} />
|
|
2221
|
-
{formState.errors.name && (
|
|
2222
|
-
<p>{formState.errors.name.message}</p>
|
|
2223
|
-
)}
|
|
2224
|
-
<input {...register('info.description')} />
|
|
2225
|
-
{formState.errors.info?.description && (
|
|
2226
|
-
<p>{formState.errors.info.description.message}</p>
|
|
2227
|
-
)}
|
|
2228
|
-
<button type="submit">submit</button>
|
|
2229
|
-
</form>
|
|
2230
|
-
);
|
|
2231
|
-
};
|
|
2199
|
+
const form = useForm<FormValues>({ validationSchema });
|
|
2232
2200
|
```
|
|
2233
2201
|
|
|
2234
|
-
### Переиспользуемый useForm
|
|
2235
|
-
|
|
2236
|
-
```tsx
|
|
2237
|
-
import { ObjectGuard, object, optional, string } from '@astral/validations';
|
|
2238
|
-
import { resolver } from '@astral/validations-react-hook-form-resolver';
|
|
2239
|
-
import {
|
|
2240
|
-
FieldValues,
|
|
2241
|
-
UseFormReturn,
|
|
2242
|
-
UseFormProps as UseReactHookFormProps,
|
|
2243
|
-
useForm as useReactHookForm,
|
|
2244
|
-
} from 'react-hook-form';
|
|
2245
|
-
|
|
2246
|
-
type UseFormProps<TFieldValues extends FieldValues = FieldValues> = Omit<
|
|
2247
|
-
UseReactHookFormProps<TFieldValues>,
|
|
2248
|
-
'resolver'
|
|
2249
|
-
> & {
|
|
2250
|
-
validationSchema?: ObjectGuard<TFieldValues, TFieldValues>;
|
|
2251
|
-
};
|
|
2252
|
-
|
|
2253
|
-
const useForm = <TFieldValues extends FieldValues = FieldValues>({
|
|
2254
|
-
validationSchema,
|
|
2255
|
-
defaultValues,
|
|
2256
|
-
...params
|
|
2257
|
-
}: UseFormProps<TFieldValues>): UseFormReturn<TFieldValues> =>
|
|
2258
|
-
useReactHookForm<TFieldValues>({
|
|
2259
|
-
...params,
|
|
2260
|
-
defaultValues,
|
|
2261
|
-
resolver: validationSchema && resolver(validationSchema),
|
|
2262
|
-
});
|
|
2263
|
-
|
|
2264
|
-
type Values = {
|
|
2265
|
-
name: string;
|
|
2266
|
-
info: { description?: string };
|
|
2267
|
-
};
|
|
2268
|
-
|
|
2269
|
-
const validationSchema = object<Values>({
|
|
2270
|
-
name: string(),
|
|
2271
|
-
info: object<Values['info']>({
|
|
2272
|
-
description: optional(string()),
|
|
2273
|
-
}),
|
|
2274
|
-
});
|
|
2275
|
-
|
|
2276
|
-
const Form = () => {
|
|
2277
|
-
const { register, handleSubmit, formState } = useForm<Values>({
|
|
2278
|
-
validationSchema,
|
|
2279
|
-
});
|
|
2280
|
-
|
|
2281
|
-
return (
|
|
2282
|
-
<form onSubmit={handleSubmit(() => {})}>
|
|
2283
|
-
<input {...register('name')} />
|
|
2284
|
-
{formState.errors.name && <p>{formState.errors.name.message}</p>}
|
|
2285
|
-
<input {...register('info.description')} />
|
|
2286
|
-
{formState.errors.info?.description && (
|
|
2287
|
-
<p>{formState.errors.info.description.message}</p>
|
|
2288
|
-
)}
|
|
2289
|
-
<button type="submit">submit</button>
|
|
2290
|
-
</form>
|
|
2291
|
-
);
|
|
2292
|
-
};
|
|
2293
|
-
```
|
|
2294
2202
|
|
|
2295
2203
|
# Guides
|
|
2296
2204
|
|