fix: update form

src/widgets/license-form/ui.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import s from './styles.module.scss';
-import { Button, Input } from '@shared/ui';
+import { Button, Input, PhoneInput } from '@shared/ui';
 import Image from 'next/image';
 import toast from 'react-hot-toast';
 
@@ -10,11 +10,18 @@ import { z } from 'zod';
 import { Controller, useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { sendFormFn } from '@shared/api/api.service';
+import { isValidPhoneNumber } from 'libphonenumber-js/min';
 
 const FormSchema = z.object({
-  name: z.string().min(3),
-  phone: z.string(),
+  name: z
+    .string()
+    .min(3, { message: 'Поле должно содержать не менее 3-х букв' })
+    .regex(/^[A-Za-zА-Яа-яЁё]+(?:[ '-][A-Za-zА-Яа-яЁё]+)*$/, {
+      message: 'Поле содержит некорректные символы',
+    }),
+  phone: z.string().refine(isValidPhoneNumber, 'Некорректный номер телефона'),
 });
+
 type TForm = z.infer<typeof FormSchema>;
 
 const defaultValues = {
@@ -27,6 +34,7 @@ export default function LicenseForm() {
     handleSubmit,
     control,
     reset,
+    clearErrors,
     formState: { errors },
   } = useForm<TForm>({
     mode: 'onSubmit',
@@ -77,14 +85,34 @@ export default function LicenseForm() {
           control={control}
           name={'name'}
           render={({ field }) => (
-            <Input {...field} placeholder={'Ваше имя'} fullWidth />
+            <Input
+              {...field}
+              placeholder={'Ваше имя'}
+              fullWidth
+              onChange={(e) => {
+                clearErrors('name');
+                field.onChange(e);
+              }}
+              error={errors && errors.name?.message}
+              errorTextColor={'#ff9191'}
+            />
           )}
         />
         <Controller
           control={control}
           name={'phone'}
           render={({ field }) => (
-            <Input {...field} placeholder={'+7 (999) 123 45 67'} fullWidth />
+            <PhoneInput
+              {...field}
+              placeholder={'+7 (999) 123-45-67'}
+              fullWidth
+              onChange={(e) => {
+                clearErrors('phone');
+                field.onChange(e);
+              }}
+              error={errors && errors.phone?.message}
+              errorTextColor={'#ff9191'}
+            />
           )}
         />
         <Button variant='orange' fullWidth>