11.10-bob: Formalar — React Hook Form + Zod validation

  CONTROLLED INPUTS (11.4: 2.11) — kichik formada yaxshi, KATTA formada og'riq:

  // 10 maydonli forma — controlled (qo'lda):
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  // ... yana 7 ta useState
  const [errors, setErrors] = useState({});
  // har maydonda: value={x} onChange={e => setX(e.target.value)} — takror
  // validatsiya: qo'lda har maydon uchun (email regex, parol uzunligi, mos kelish...)

  MUAMMOLAR:
   Ko'p useState (10 maydon = 10 state) — tarqoq
   HAR harf yozilganda BUTUN forma re-render (sekin — 11.4: 2.4)
   Validatsiya qo'lda (har qoida qo'lda yoziladi — xatoga moyil)
   Xato holatlari, touched, submit — hammasini qo'lda boshqarish (yuzlab qator)

   Controlled — kichik formada OK; katta formada RHF kerak (samarali, sodda — 2.2)
   Forma — eng ko'p takrorlanadigan UI  maxsus vosita (RHF) bilan hal qilinadi

  CONTROLLED 11.4-bob — input qiymati REACT STATE'da (har harfda re-render):
  <input value={name} onChange={e => setName(e.target.value)} />
  // React har keystroke'ni biladi  har harfda komponent re-render (sekin katta formada)

  UNCONTROLLED (RHF) — input qiymati DOM'da (ref orqali — React aralashmaydi):
  <input {...register("name")} />     // RHF ref bilan ulaydi (useState YO'Q)
  // foydalanuvchi yozganda — React re-render BO'LMAYDI (DOM o'zi tutadi)
  // qiymat faqat submit/kerakli paytda o'qiladi (ref'dan)

  ┌──────────────┬─────────────────────┬──────────────────────────┐
  │              │ Controlled 11.4-bob   │ Uncontrolled (RHF)       │
  ├──────────────┼─────────────────────┼──────────────────────────┤
  │ Qiymat qayerda│ React state        │ DOM (ref)                │
  │ Re-render     │ HAR harfda          │ kam (submit/validatsiyada)│
  │ Tezlik        │ sekinroq (katta)    │ TEZ (uncontrolled)       │
  │ Kod           │ ko'p (har maydon)   │ kam (register)           │
  └──────────────┴─────────────────────┴──────────────────────────┘

   RHF UNCONTROLLED yondashuv  har harfda re-render YO'Q  KATTA formada tez
   RHF qiymatni ref'dan o'qiydi (DOM'dan)  React'ni "bezovta qilmaydi" (performance)

  O'RNATISH: npm install react-hook-form

  ASOSIY UCH ELEMENT:
  import { useForm } from "react-hook-form";

  function MyForm() {
    const { register, handleSubmit } = useForm();   // 1. forma yaratiladi

    const onSubmit = (data) => console.log(data);   // 2. submit ishlovchi (data — barcha qiymat)

    return (
      <form onSubmit={handleSubmit(onSubmit)}>      {/* 3. handleSubmit o'raydi (validatsiya + onSubmit) */}
        <input {...register("name")} />             {/* register — maydonni ulaydi */}
        <input {...register("email")} />
        <button type="submit">Yuborish</button>
      </form>
    );
  }

  - useForm()      — forma "instansi" (register, handleSubmit, formState...)
  - register("x")  — input'ni formaga ulaydi (name="x" + ref + onChange/onBlur — DOM)
  - handleSubmit   — submit'ni o'raydi: validatsiya O'Tsa  onSubmit(data); xato bo'lsa  onError

  ┌──────────────────────────────────────────────────────────┐
  │ register: input  forma | handleSubmit: validatsiya+submit │
  │ onSubmit(data): data — BARCHA maydon qiymati (obyekt)      │
  └──────────────────────────────────────────────────────────┘

   {...register("name")} — name/ref/event'larni input'ga "tarqatadi" (spread — 11.2)
   data — submit'da avtomatik yig'ilgan barcha maydon qiymati (qo'lda yig'ish yo'q)

  formState — forma haqida BARCHA holat ma'lumoti:
  const { register, handleSubmit, formState } = useForm();
  const { errors, isSubmitting, isValid, isDirty, touchedFields } = formState;

  MUHIM HOLATLAR:
  errors          — validatsiya xatolari (errors.email?.message — maydon xatosi — 2.8)
  isSubmitting    — submit jarayonida (async submit paytida true — tugma disable)
  isValid         — barcha maydon valid (forma to'g'ri to'ldirilgan)
  isDirty         — forma o'zgartirilgan (default'dan farq — "saqlanmagan o'zgarish" ogohlantirish)
  touchedFields   — qaysi maydonlar "tegilgan" (fokus olib-ketgan — xatoni qachon ko'rsatish)
  dirtyFields     — qaysi maydonlar o'zgartirilgan

  ISHLATISH:
  <button disabled={isSubmitting || !isValid}>   {/* submit paytida yoki noto'g'rida disable */}
    {isSubmitting ? "Yuborilmoqda..." : "Yuborish"}
  </button>

   formState — formani BOSHQARISH uchun (tugma holati, xato ko'rsatish, ogohlantirish)
   isSubmitting — async submit'da tugmani disable (ikki marta yuborishni oldini olish)

  RHF register ICHIDA validatsiya qoidalari (Zod'siz — oddiy holatlar):

  <input {...register("email", {
    required: "Email majburiy",                  // bo'sh bo'lmasin (xato matni)
    pattern: { value: /^\S+@\S+$/, message: "Email noto'g'ri" },   // regex (2.13 RegEx)
  })} />

  <input {...register("age", {
    required: "Yosh majburiy",
    min: { value: 18, message: "18 dan katta bo'lsin" },
    max: { value: 100, message: "Noto'g'ri yosh" },
    valueAsNumber: true,                         // string  number (input qiymati string — 11.4)
  })} />

  <input {...register("password", {
    minLength: { value: 8, message: "Kamida 8 belgi" },
    validate: (v) => v.includes("!") || "Maxsus belgi kerak",   // maxsus qoida (funksiya)
  })} />

  QOIDALAR: required, min/max, minLength/maxLength, pattern, validate (custom)

   Built-in — oddiy forma uchun yetadi; MURAKKAB/qayta ishlatiladigan  Zod (2.6)
   valueAsNumber/valueAsDate — input string'ni to'g'ri turga o'giradi

  ZOD — validatsiya SXEMASI (qoidalar) + TypeScript turlari (BIR manbadan — 5.9):

  import { z } from "zod";

  const loginSchema = z.object({
    email: z.string().email("Email noto'g'ri"),               // string + email format
    password: z.string().min(8, "Kamida 8 belgi"),            // string + min uzunlik
    age: z.number().min(18, "18 dan katta").max(100),         // number + chegara
    role: z.enum(["user", "admin"]),                          // faqat shu qiymatlar
    agree: z.boolean().refine(v => v, "Rozilik kerak"),       // custom (refine — 2.13)
  });

  TYPE INFERENCE — sxemadan TypeScript turini AVTOMATIK chiqarish:
  type LoginForm = z.infer<typeof loginSchema>;
  //  { email: string; password: string; age: number; role: "user"|"admin"; agree: boolean }
  //   (qo'lda interface yozish YO'Q — sxema = yagona manba — 5.9)

  ┌──────────────────────────────────────────────────────────┐
  │ Zod sxema = validatsiya qoidalari + TypeScript turi (bir   │
  │ joyda)  "single source of truth" (takror yo'q)            │
  └──────────────────────────────────────────────────────────┘

   Zod — backend'da ham (NestJS/Express — 5.9); frontend forma bilan BIR XIL sxema (DRY)
   z.infer — sxemadan tur (qo'lda interface yozish shart emas — avtomatik, doim mos)

  RHF + Zod ulanishi — @hookform/resolvers/zod orqali (zodResolver):
  npm install zod @hookform/resolvers

  import { useForm } from "react-hook-form";
  import { zodResolver } from "@hookform/resolvers/zod";
  import { z } from "zod";

  const schema = z.object({
    email: z.string().email("Email noto'g'ri"),
    password: z.string().min(8, "Kamida 8 belgi"),
  });
  type FormData = z.infer<typeof schema>;

  function LoginForm() {
    const { register, handleSubmit, formState: { errors } } = useForm({
      resolver: zodResolver(schema),     //  Zod sxemani RHF'ga ULAYDI
    });
    const onSubmit = (data: FormData) => console.log(data);   // data — TYPE-SAFE (z.infer)
    return (
      <form onSubmit={handleSubmit(onSubmit)}>
        <input {...register("email")} />
        {errors.email && <span>{errors.email.message}</span>}   {/* Zod xato matni 2.8-bob */}
        <input type="password" {...register("password")} />
        {errors.password && <span>{errors.password.message}</span>}
        <button>Kirish</button>
      </form>
    );
  }

  ┌──────────────────────────────────────────────────────────┐
  │ resolver: zodResolver(schema) — RHF validatsiyani Zod'ga   │
  │ topshiradi; xatolar errors'da (Zod matni bilan)            │
  └──────────────────────────────────────────────────────────┘

   resolver — RHF'ga "validatsiyani Zod qiladi" deydi (built-in o'rniga — 2.5)
   data — z.infer turida (type-safe submit — TypeScript xatoni tutadi)

  errors obyektidan maydon xatolari ko'rsatiladi (formState.errors — 2.4):

  {errors.email && <span className="error">{errors.email.message}</span>}
  //      └─ maydon xatosi (bor bo'lsa)        └─ xato matni (Zod/qoida — 2.6, 2.5)

  TOZA NAQSH (xato + a11y — 2.14):
  <div>
    <label htmlFor="email">Email</label>
    <input
      id="email"
      {...register("email")}
      aria-invalid={errors.email ? "true" : "false"}    // a11y — ekran o'quvchi 2.14-bob
      aria-describedby="email-error"
    />
    {errors.email && (
      <span id="email-error" role="alert" className="error">{errors.email.message}</span>
    )}
  </div>

  QACHON xato ko'rsatish (mode):
  useForm({ mode: "onBlur" })    // fokus ketganda tekshir (yumshoq — yozayotganda bezovta qilmaydi)
  useForm({ mode: "onChange" })  // har o'zgarishda (qattiq — jonli)
  useForm({ mode: "onSubmit" })  // faqat submit'da (default — eng yumshoq)

   mode — UX: onBlur (tavsiya) — foydalanuvchi yozayotganda emas, ketganda xato
   Xatoni label/input bilan bog'la (aria-describedby — a11y — 2.14)

  MUAMMO: RHF register oddiy <input>/<select> bilan ishlaydi (uncontrolled — 2.2)
   LEKIN UI kutubxona komponentlari (MUI Select, react-select, DatePicker) CONTROLLED
    (ular value/onChange kutadi, ref'ni to'g'ridan bermaydi)  register ishlamaydi

  YECHIM — <Controller> (RHF'ni controlled komponentga "ko'prik"):
  import { Controller } from "react-hook-form";

  <Controller
    name="country"
    control={control}                  // useForm()'dan control
    render={({ field }) => (
      <Select {...field} options={countries} />   // field: value, onChange, onBlur, ref, name
    )}
  />
  // field.value / field.onChange — Controller controlled komponentga beradi (RHF bilan sinxron)

  ┌──────────────────────────────────────────────────────────┐
  │ register: oddiy input (uncontrolled — tez)                 │
  │ Controller: UI kutubxona / controlled komponent (ko'prik)  │
  └──────────────────────────────────────────────────────────┘

   Oddiy <input>/<select>  register 2.3-bob; UI kutubxona komponenti  Controller
   control — useForm() qaytaradi (Controller'ga beriladi)

  FORMANI DASTURIY BOSHQARISH (qiymatni o'qish/yozish/kuzatish):

  watch — maydonni KUZATISH (o'zgarganda re-render — shartli UI uchun):
  const accountType = watch("accountType");   // bu maydon o'zgarganda komponent re-render
  {accountType === "business" && <input {...register("companyName")} />}   // shartli maydon

  setValue — maydonga QIYMAT berish (dasturiy):
  setValue("city", "Toshkent");               // masalan select'ga qarab avtomatik to'ldirish

  getValues — qiymatni O'QISH (re-render'siz — submit'siz tekshirish):
  const email = getValues("email");           // joriy qiymat (kuzatmay — bir martalik o'qish)

  reset — formani QAYTA TIKLASH (tozalash yoki yangi qiymatlar):
  reset();                                     // default'ga (yoki bo'sh)
  reset({ name: "Ali", email: "ali@x.uz" });   // yangi qiymatlar bilan (tahrirlash — 2.11)

  ┌──────────────────────────────────────────────────────────┐
  │ watch: kuzat (re-render) | getValues: o'qi (re-render yo'q)│
  │ setValue: yoz | reset: qayta tikla (tozala/to'ldir)       │
  └──────────────────────────────────────────────────────────┘

   watch — shartli UI uchun (re-render keltiradi); getValues — bir martalik o'qish (tez)
   reset(data) — submit'dan keyin tozalash yoki tahrirlash formasini to'ldirish (2.11)

  DEFAULT VALUES — formaning boshlang'ich qiymatlari (tahrirlash formasi uchun muhim):

  YARATISH formasi (bo'sh default):
  const { register } = useForm({
    defaultValues: { name: "", email: "", role: "user" },
  });

  TAHRIRLASH formasi (mavjud ma'lumot bilan to'ldirish — API'dan keladi):
  function EditProfile({ userId }) {
    const { register, reset, handleSubmit } = useForm();
    const { data: user } = useFetch(`/api/users/${userId}`);   // 11.7

    useEffect(() => {
      if (user) reset(user);            //  ma'lumot kelgach — formani to'ldir (reset — 2.10)
    }, [user, reset]);
    // ...
  }
  // YOKI defaultValues async funksiya (RHF v7+):
  // useForm({ defaultValues: async () => fetch(...).then(r => r.json()) });

  ┌──────────────────────────────────────────────────────────┐
  │ defaultValues: boshlang'ich (yaratish — bo'sh; tahrir — ma'lumot)│
  │ reset(data): API ma'lumoti kelgach formani to'ldir (useEffect)│
  └──────────────────────────────────────────────────────────┘

   defaultValues — controlled/uncontrolled'ni to'g'ri boshlaydi (Xato: undefined  controlled warning — 11.4)
   Tahrir formasi: ma'lumot async kelsa — useEffect + reset(data) (defaultValues hali bo'sh edi)

  ASYNC SUBMIT — onSubmit serverga so'rov yuboradi (loading + server xatolari):

  const { register, handleSubmit, setError, formState: { isSubmitting } } = useForm({
    resolver: zodResolver(schema),
  });

  async function onSubmit(data) {
    try {
      await api.register(data);              // server so'rovi (isSubmitting avtomatik true)
      reset();                                // muvaffaqiyatli  tozala
      navigate("/dashboard");                 // yo'naltir 11.9-bob
    } catch (err) {
      // SERVER XATOSI (masalan "email band")  maydonga yoki umumiy xato:
      if (err.field) {
        setError(err.field, { message: err.message });   // maydon xatosi (server'dan)
      } else {
        setError("root", { message: "Xatolik yuz berdi" });   // umumiy forma xatosi
      }
    }
  }

  <button disabled={isSubmitting}>           {/* submit paytida disable (ikki marta yo'q) */}
    {isSubmitting ? "Yuborilmoqda..." : "Ro'yxatdan o'tish"}
  </button>
  {errors.root && <p className="error">{errors.root.message}</p>}   {/* umumiy xato */}

   setError — server xatosini formaga qo'shadi (frontend validatsiya yetmagan narsa — masalan "email band")
   isSubmitting — async submit'ni avtomatik kuzatadi (qo'lda loading state kerak emas)

  DINAMIK MAYDONLAR — soni o'zgaradigan maydon ro'yxati (telefon raqamlari, ta'lim, mahsulot variantlari):

  import { useFieldArray, useForm } from "react-hook-form";

  function Form() {
    const { control, register, handleSubmit } = useForm({
      defaultValues: { phones: [{ number: "" }] },   // boshlang'ich 1 ta
    });
    const { fields, append, remove } = useFieldArray({ control, name: "phones" });

    return (
      <form>
        {fields.map((field, index) => (
          <div key={field.id}>                       {/*  field.id — RHF beradi (index emas! 11.4: 2.13) */}
            <input {...register(`phones.${index}.number`)} />   {/* ichma-ich nom */}
            <button type="button" onClick={() => remove(index)}>O'chir</button>
          </div>
        ))}
        <button type="button" onClick={() => append({ number: "" })}>+ Telefon qo'sh</button>
      </form>
    );
  }

  useFieldArray QAYTARADI:
  fields  — joriy elementlar (key={field.id} — barqaror)
  append  — oxiriga qo'sh    remove — o'chir    insert/move/swap — boshqa amallar

   key={field.id} (RHF beradi — barqaror; index ISHLATMA — 11.4: 2.13)
   Maydon nomi: `phones.${index}.number` (ichma-ich — massiv ichidagi obyekt)

  FORMA A11Y (accessibility — har kim ishlata olsin — 1.9):
   Har input'ga <label htmlFor="id"> (yoki aria-label) — ekran o'quvchi o'qiydi
   aria-invalid={!!errors.x} — xato holatini bildiradi
   aria-describedby="x-error" — input'ni xato matni bilan bog'laydi
   role="alert" xato matnida — paydo bo'lganda o'qiladi
   <button type="submit"> (type="button" — submit qilmaydi)
   Klaviatura bilan to'liq ishlasin (tab, enter)

  FORMA BEST PRACTICES:
   register — oddiy input; Controller — UI kutubxona 2.9-bob
   Validatsiya Zod sxemada (markazlashgan, type-safe, backend bilan bir xil — 2.6)
   mode: "onBlur" (yumshoq UX — 2.8)
   isSubmitting — tugmani disable (ikki marta yo'q — 2.12)
   Server xatolarni setError bilan 2.12-bob
   defaultValues (controlled warning'dan saqlaydi — 2.11)

   Forma a11y — majburiy (ekran o'quvchi, klaviatura foydalanuvchilari — 1.9, 14)
   Frontend validatsiya — UX; xavfsizlik HAR DOIM backend'da (Zod ikki joyda — 5.9, 14)

  useController — Controller BILAN BIR XIL, lekin HOOK ko'rinishida (render-prop o'rniga):

  import { useController } from "react-hook-form";

  function TextField({ name, control, label }) {
    const { field, fieldState } = useController({ name, control });
    // field:      { value, onChange, onBlur, ref, name } — controlled komponentga
    // fieldState: { error, isDirty, isTouched, invalid } — maydon holati
    return (
      <div>
        <label>{label}</label>
        <input {...field} />
        {fieldState.error && <span>{fieldState.error.message}</span>}
      </div>
    );
  }

  QACHON: qayta ishlatiladigan maxsus maydon komponenti yozganda (Controller — bir martalik)

  UI KUTUBXONALAR (controlled — register ishlamaydi  Controller/useController):
  - MUI (Material UI):  <Controller render={({field}) => <TextField {...field} .../>} />
  - Ant Design (AntD):  <Controller render={({field}) => <Input {...field} />} />
  - react-select, DatePicker, rich-text — barchasi shu naqsh (2.9)

   useController — Controller'ning ichki "yuragi"; maxsus reusable maydonga qulay (2.16)
   Controller (render-prop) — tez, bir martalik; useController (hook) — komponentga o'ralganda

  MUAMMO: har formada takror <label> + <input> + {errors.x && <span>} — takror kod

  YECHIM — reusable maydon komponenti (register'ni prop sifatida uzatish):

  function Field({ label, name, register, error, type = "text", ...rest }) {
    return (
      <div className="field">
        <label htmlFor={name}>{label}</label>
        <input
          id={name}
          type={type}
          {...register(name)}                        // register uzatiladi 2.3-bob
          aria-invalid={error ? "true" : "false"}    // a11y 2.14-bob
        />
        {error && <span role="alert" className="error">{error.message}</span>}
      </div>
    );
  }

  ISHLATISH (forma qisqaradi):
  <Field label="Email" name="email" register={register} error={errors.email} />
  <Field label="Parol" name="password" type="password" register={register} error={errors.password} />

   register/error prop orqali  bir marta yoz, hamma formada ishlat (DRY)
   Controlled UI-kutubxona maydoni uchun — useController bilan reusable (2.15)

  ASYNC VALIDATSIYA — qoida serverga bog'liq (masalan "bu username band-mi?"):

  // 1) RHF built-in validate — async funksiya bo'lishi mumkin:
  <input {...register("username", {
    validate: async (value) => {
      const res = await fetch(`/api/check-username?u=${value}`);
      const { available } = await res.json();
      return available || "Bu username band";        // false  xato matni
    },
  })} />

  // 2) Zod bilan async — .refine ASYNC (mode "onBlur" tavsiya — har harfda so'rov yubormaslik):
  const schema = z.object({
    email: z.string().email().refine(
      async (email) => await isEmailFree(email),      // server so'rovi
      "Bu email ro'yxatdan o'tgan"
    ),
  });
  //  async refine  zodResolver'da async mode avtomatik ishlaydi

  DEBOUNCE — har harfda emas, TO'XTAGANDA tekshir (server'ni bombardimon qilmaslik):
  - mode: "onBlur" (fokus ketganda — eng sodda debounce o'rnini bosadi)
  - yoki watch + useDebounce (12.x) + qo'lda tekshir (jonli "band-mi" ko'rsatkich)

   Async validatsiya — server bilishi kerak bo'lgan qoida (username/email band, promo-kod)
   Debounce/onBlur SHART — har keystroke'da fetch = server DDoS + sekin UX

  FAYL INPUT — <input type="file"> RHF bilan (fayl — string emas, FileList):

  <input type="file" {...register("avatar")} accept="image/*" />
  // register("avatar")  e.target.files (FileList) RHF'da saqlanadi

  onSubmit'da fayl — data.avatar[0] (FileList'ning birinchi fayli):
  async function onSubmit(data) {
    const file = data.avatar[0];                     // File obyekti
    const formData = new FormData();
    formData.append("avatar", file);
    formData.append("name", data.name);
    await fetch("/api/upload", { method: "POST", body: formData });  // multipart (5.x)
  }

  ZOD bilan fayl validatsiya (hajm/tur):
  avatar: z.instanceof(FileList)
    .refine((f) => f.length > 0, "Rasm tanlang")
    .refine((f) => f[0]?.size < 2_000_000, "2MB dan kichik bo'lsin")
    .refine((f) => f[0]?.type.startsWith("image/"), "Faqat rasm"),

   Fayl — JSON emas  FormData (multipart/form-data) bilan yuboriladi (5.x backend)
   data.avatar — FileList (massiv emas); birinchi fayl — data.avatar[0]

  MULTI-STEP FORMA — bitta forma, bir nechta qadam (uzun forma  bosqichlarga bo'linadi):

  function Wizard() {
    const [step, setStep] = useState(0);             // joriy bosqich (state)
    const { register, handleSubmit, trigger, formState: { errors } } = useForm({
      resolver: zodResolver(fullSchema),
      mode: "onBlur",
    });

    async function next() {
      const fields = stepFields[step];               // shu bosqich maydonlari
      const ok = await trigger(fields);              //  FAQAT shu bosqichni validatsiyala
      if (ok) setStep((s) => s + 1);                 // valid  keyingi qadam
    }

    return (
      <form onSubmit={handleSubmit(onSubmit)}>
        {step === 0 && <input {...register("name")} />}      {/* 1-qadam */}
        {step === 1 && <input {...register("address")} />}   {/* 2-qadam */}
        {step === 2 && <button type="submit">Tasdiqlash</button>}  {/* oxirgi */}
        {step > 0 && <button type="button" onClick={() => setStep(s => s-1)}>Orqaga</button>}
        {step < 2 && <button type="button" onClick={next}>Keyingi</button>}
      </form>
    );
  }

   Bitta useForm — barcha bosqich (holat saqlanadi); step — useState
   trigger([fields]) — FAQAT joriy bosqichni tekshir ("Keyingi" uchun); submit — oxirida

  RHF vs FORMIK (eski standart) — nega RHF g'olib:
  ┌──────────────┬─────────────────────────┬───────────────────────────┐
  │              │ Formik                  │ React Hook Form           │
  ├──────────────┼─────────────────────────┼───────────────────────────┤
  │ Yondashuv    │ controlled (state)      │ uncontrolled (ref — TEZ)  │
  │ Re-render    │ ko'p (har harf)         │ kam 2.2-bob                 │
  │ Validatsiya  │ Yup (yoki qo'lda)       │ Zod (yoki built-in)       │
  │ Kod hajmi    │ ko'proq                 │ kamroq (register)         │
  │ Holati (2026)│ eski loyihalar          │ zamonaviy standart        │
  └──────────────┴─────────────────────────┴───────────────────────────┘
   Yangi loyihada — RHF + Zod; Formik'ni faqat eski kodda uchratasiz

  SERVER ACTION FORMALAR (Next.js — 13-QISM):
  - Next.js Server Actions — forma to'g'ridan server funksiyasiga yuboriladi (client JS'siz ham)
  - useActionState / <form action={serverAction}> — RHF'siz "progressive enhancement"
  - RHF (client UX) + Zod (server'da qayta) birga ishlatiladi (13-QISM'da chuqur)

  XATO MATNLARI — Zod'da to'g'ridan o'zbekcha yozish (eng sodda):
  z.string().min(8, "Kamida 8 belgi").email("Email noto'g'ri")

  KO'P TILLI (i18n — 11.x/12.x) — matnni tarjima kalitiga bog'lash:
  z.string().min(8, t("errors.password.min"))       // t() — tarjima funksiyasi
  // yoki xato KODINI ber, ko'rsatishda tarjima qil:
  {errors.password && <span>{t(`errors.${errors.password.type}`)}</span>}

  GLOBAL default (Zod errorMap) — barcha xato uchun bir joyda o'zbekcha:
  z.setErrorMap((issue, ctx) => {
    if (issue.code === "too_small") return { message: "Juda qisqa" };
    return { message: ctx.defaultError };
  });

   Kichik loyiha — matnni to'g'ridan o'zbekcha; ko'p tilli — i18n kaliti (t())
   Zod default xatolari inglizcha  errorMap yoki har validatorda matn ber

SETUP:             npm i react-hook-form zod @hookform/resolvers
FORMA 2.3-bob:       const { register, handleSubmit, formState:{errors} } = useForm({ resolver: zodResolver(schema) })
REGISTER 2.3-bob:    <input {...register("email")} />
SUBMIT 2.3-bob:      <form onSubmit={handleSubmit(onSubmit)}>  // onSubmit(data)
ZOD 2.6-bob:         z.object({ email: z.string().email(), age: z.number().min(18) })  +  z.infer<typeof s>
XATO 2.8-bob:        {errors.email && <span>{errors.email.message}</span>}
CONTROLLER 2.9-bob:  <Controller name="x" control={control} render={({field}) => <Select {...field}/>} />
BOSHQARUV 2.10-bob:  watch("x") | setValue("x",v) | getValues("x") | reset(data)
DEFAULT 2.11-bob:    useForm({ defaultValues: {...} })  |  reset(apiData)  // tahrir
ASYNC 2.12-bob:      isSubmitting | setError("email",{message}) | setError("root",{message})
ARRAY 2.13-bob:      const { fields, append, remove } = useFieldArray({ control, name:"phones" })
useController 2.15-bob: const { field, fieldState } = useController({ name, control })  // reusable maydon
TRIGGER 2.19-bob:    await trigger(["field1","field2"])   // qisman validatsiya (multi-step)
FAYL 2.18-bob:       <input type="file" {...register("avatar")} />  // data.avatar[0] (FileList)
ZOD ILG'OR 2.6-bob:  .optional() | .nullable() | z.array(...) | .superRefine((d,ctx)=>ctx.addIssue({...}))

//  CONTROLLED 11.4-bob — har maydon useState, har harf re-render:
function ControlledForm() {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  // ... har maydon, har onChange, validatsiya qo'lda
  return (
    <form>
      <input value={name} onChange={e => setName(e.target.value)} />
      <input value={email} onChange={e => setEmail(e.target.value)} />
    </form>
  );
}

//  RHF — register, useState yo'q, re-render kam:
function RHFForm() {
  const { register, handleSubmit } = useForm();
  return (
    <form onSubmit={handleSubmit(data => console.log(data))}>
      <input {...register("name")} />       {/* useState yo'q */}
      <input {...register("email")} />
      <button>Yuborish</button>
    </form>
  );
}
//  RHF — kam kod + har harfda re-render yo'q (uncontrolled — 2.2)

import { useForm } from "react-hook-form";

function ContactForm() {
  const { register, handleSubmit, formState: { errors, isSubmitting } } = useForm();

  const onSubmit = async (data) => {
    await new Promise(r => setTimeout(r, 1000));   // soxta async (server)
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("name", { required: "Ism majburiy" })} placeholder="Ism" />
      {errors.name && <span className="error">{errors.name.message}</span>}

      <textarea {...register("message", { required: "Xabar majburiy" })} />
      {errors.message && <span className="error">{errors.message.message}</span>}

      <button disabled={isSubmitting}>{isSubmitting ? "Yuborilmoqda..." : "Yuborish"}</button>
    </form>
  );
}

function SignupForm() {
  const { register, handleSubmit, formState: { errors }, watch } = useForm();
  const password = watch("password");            // mos kelish uchun kuzat (2.10)

  return (
    <form onSubmit={handleSubmit(d => console.log(d))}>
      <input {...register("email", {
        required: "Email majburiy",
        pattern: { value: /^\S+@\S+\.\S+$/, message: "Email noto'g'ri" },
      })} />
      {errors.email && <span>{errors.email.message}</span>}

      <input type="password" {...register("password", {
        required: "Parol majburiy",
        minLength: { value: 8, message: "Kamida 8 belgi" },
      })} />
      {errors.password && <span>{errors.password.message}</span>}

      <input type="password" {...register("confirm", {
        validate: (v) => v === password || "Parollar mos emas",   // custom 2.5-bob
      })} />
      {errors.confirm && <span>{errors.confirm.message}</span>}

      <button>Ro'yxatdan o'tish</button>
    </form>
  );
}

import { z } from "zod";

export const registerSchema = z.object({
  name: z.string().min(2, "Kamida 2 belgi"),
  email: z.string().email("Email noto'g'ri"),
  age: z.coerce.number().min(18, "18 dan katta bo'lsin"),   // coerce — string  number
  password: z.string().min(8, "Kamida 8 belgi"),
  role: z.enum(["user", "admin"]),
  terms: z.literal(true, { errorMap: () => ({ message: "Shartlarni qabul qiling" }) }),
});

// Tur — sxemadan AVTOMATIK (qo'lda interface yozish yo'q):
export type RegisterData = z.infer<typeof registerSchema>;
//  { name: string; email: string; age: number; password: string; role: "user"|"admin"; terms: true }
//  Bir sxema = qoidalar + tur (single source — 5.9; frontend + backend bir xil)

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { registerSchema, RegisterData } from "./schema";

function RegisterForm() {
  const { register, handleSubmit, formState: { errors, isSubmitting } } =
    useForm<RegisterData>({
      resolver: zodResolver(registerSchema),       // Zod ulandi
      mode: "onBlur",                              // fokus ketganda tekshir (2.8)
    });

  const onSubmit = (data: RegisterData) => console.log(data);   // type-safe

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label htmlFor="email">Email</label>
        <input id="email" {...register("email")} aria-invalid={!!errors.email} />
        {errors.email && <span role="alert" className="error">{errors.email.message}</span>}
      </div>
      <div>
        <label htmlFor="password">Parol</label>
        <input id="password" type="password" {...register("password")} />
        {errors.password && <span role="alert">{errors.password.message}</span>}
      </div>
      <button disabled={isSubmitting}>Ro'yxatdan o'tish</button>
    </form>
  );
}
//  Validatsiya Zod'da (markazlashgan, type-safe), xatolar avtomatik errors'da (2.7)

import { Controller, useForm } from "react-hook-form";
import Select from "react-select";              // controlled UI kutubxona

function ProfileForm() {
  const { control, handleSubmit } = useForm();
  const options = [{ value: "uz", label: "O'zbekiston" }, { value: "kz", label: "Qozog'iston" }];

  return (
    <form onSubmit={handleSubmit(d => console.log(d))}>
      <Controller
        name="country"
        control={control}
        rules={{ required: "Davlat tanlang" }}
        render={({ field, fieldState }) => (
          <>
            <Select {...field} options={options} />        {/* field: value/onChange (controlled) */}
            {fieldState.error && <span>{fieldState.error.message}</span>}
          </>
        )}
      />
      <button>Saqlash</button>
    </form>
  );
}
//  react-select — controlled (register ishlamaydi)  Controller ko'prik (2.9)

function CheckoutForm() {
  const { register, handleSubmit, watch } = useForm({ defaultValues: { delivery: "pickup" } });
  const delivery = watch("delivery");            // o'zgarganda re-render (shartli UI)

  return (
    <form onSubmit={handleSubmit(d => console.log(d))}>
      <select {...register("delivery")}>
        <option value="pickup">Olib ketish</option>
        <option value="courier">Kuryer</option>
      </select>

      {delivery === "courier" && (                // faqat kuryer tanlansa (watch — 2.10)
        <input {...register("address", { required: true })} placeholder="Manzil" />
      )}
      <button>Buyurtma</button>
    </form>
  );
}

function EditProfile({ userId }) {
  const { register, handleSubmit, reset } = useForm();
  const { data: user, loading } = useFetch(`/api/users/${userId}`);   // 11.7

  useEffect(() => {
    if (user) reset(user);            // ma'lumot kelgach formani to'ldir (2.11)
  }, [user, reset]);

  if (loading) return <Spinner />;
  return (
    <form onSubmit={handleSubmit(d => console.log("Saqlash:", d))}>
      <input {...register("name")} />
      <input {...register("email")} />
      <button>Saqlash</button>
    </form>
  );
}
//  Tahrir formasi standart naqsh: fetch  reset(data) (defaultValues async keladi — 2.11)

function RegisterForm() {
  const { register, handleSubmit, setError, formState: { errors, isSubmitting } } =
    useForm({ resolver: zodResolver(registerSchema) });

  async function onSubmit(data) {
    try {
      await api.register(data);                  // server (isSubmitting avtomatik)
    } catch (err) {
      if (err.code === "EMAIL_TAKEN") {
        setError("email", { message: "Bu email band" });   // maydon xatosi (server'dan — 2.12)
      } else {
        setError("root", { message: "Xatolik. Qayta urinib ko'ring." });   // umumiy
      }
    }
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("email")} />
      {errors.email && <span>{errors.email.message}</span>}
      {errors.root && <p className="error">{errors.root.message}</p>}   {/* umumiy xato */}
      <button disabled={isSubmitting}>{isSubmitting ? "..." : "Ro'yxat"}</button>
    </form>
  );
}
//  Server xatosi (email band)  setError; frontend Zod tuta olmaydi (faqat server biladi — 2.12)

import { useForm, useFieldArray } from "react-hook-form";

function PhonesForm() {
  const { register, control, handleSubmit } = useForm({
    defaultValues: { phones: [{ number: "" }] },
  });
  const { fields, append, remove } = useFieldArray({ control, name: "phones" });

  return (
    <form onSubmit={handleSubmit(d => console.log(d))}>
      {fields.map((field, index) => (
        <div key={field.id}>                     {/* RHF id — barqaror (11.4: 2.13) */}
          <input {...register(`phones.${index}.number`)} placeholder="Telefon" />
          {fields.length > 1 && (
            <button type="button" onClick={() => remove(index)}>O'chir</button>
          )}
        </div>
      ))}
      <button type="button" onClick={() => append({ number: "" })}>+ Raqam qo'sh</button>
      <button type="submit">Saqlash</button>
    </form>
  );
}
//  append/remove — dinamik; key={field.id} (index emas — 2.13); type="button" (submit qilmasin)

const passwordSchema = z.object({
  password: z.string().min(8, "Kamida 8 belgi")
    .regex(/[A-Z]/, "Bosh harf kerak")
    .regex(/[0-9]/, "Raqam kerak"),
  confirm: z.string(),
}).refine((data) => data.password === data.confirm, {   //  ikki maydonni solishtirish
  message: "Parollar mos emas",
  path: ["confirm"],                                     // xato qaysi maydonda ko'rinsin
});

//  refine — bir nechta maydonga bog'liq qoida (built-in qila olmaydi — 2.6)
// path — xato confirm maydoniga biriktiriladi (errors.confirm)

const schema = z.object({
  age: z.coerce.number().int().positive(),       // "25" (string)  25 (number)
  email: z.string().email().toLowerCase().trim(), // tozala + kichik harf (transform)
  tags: z.string().transform(s => s.split(",").map(t => t.trim())),  // "a,b,c"  ["a","b","c"]
  birthDate: z.coerce.date(),                     // string  Date
});
//  coerce/transform — kirishni tozalab/o'girib beradi (input string  kerakli tur)

function AccessibleForm() {
  const { register, handleSubmit, formState: { errors, isSubmitting } } =
    useForm({ resolver: zodResolver(schema), mode: "onBlur" });

  return (
    <form onSubmit={handleSubmit(d => console.log(d))} noValidate>
      <div className="field">
        <label htmlFor="email">Email manzil</label>
        <input
          id="email"
          type="email"
          {...register("email")}
          aria-invalid={errors.email ? "true" : "false"}    // a11y holati
          aria-describedby={errors.email ? "email-err" : undefined}
        />
        {errors.email && (
          <span id="email-err" role="alert" className="error">{errors.email.message}</span>
        )}
      </div>
      <button type="submit" disabled={isSubmitting}>Yuborish</button>
    </form>
  );
}
//  label + aria-invalid + aria-describedby + role="alert" — ekran o'quvchi to'liq tushunadi (2.14, 1.9)

const schema = z.object({
  name: z.string().min(2, "Kamida 2 belgi"),
  email: z.string().email("Email noto'g'ri"),
  password: z.string().min(8, "Kamida 8 belgi"),
  confirm: z.string(),
  age: z.coerce.number().min(18, "18+"),
  role: z.enum(["user", "seller"]),
  terms: z.literal(true, { errorMap: () => ({ message: "Shartlarni qabul qiling" }) }),
}).refine(d => d.password === d.confirm, { message: "Parollar mos emas", path: ["confirm"] });

type FormData = z.infer<typeof schema>;

function FullRegisterForm() {
  const { register, handleSubmit, setError, watch, formState: { errors, isSubmitting } } =
    useForm<FormData>({ resolver: zodResolver(schema), mode: "onBlur" });
  const role = watch("role");

  async function onSubmit(data: FormData) {
    try {
      await api.register(data);
    } catch (err) {
      setError("root", { message: "Ro'yxatdan o'tib bo'lmadi" });
    }
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)} noValidate>
      <input {...register("name")} placeholder="Ism" />
      {errors.name && <span>{errors.name.message}</span>}

      <input {...register("email")} placeholder="Email" />
      {errors.email && <span>{errors.email.message}</span>}

      <input type="password" {...register("password")} placeholder="Parol" />
      {errors.password && <span>{errors.password.message}</span>}

      <input type="password" {...register("confirm")} placeholder="Parolni takrorlang" />
      {errors.confirm && <span>{errors.confirm.message}</span>}

      <input type="number" {...register("age")} placeholder="Yosh" />
      {errors.age && <span>{errors.age.message}</span>}

      <select {...register("role")}>
        <option value="user">Xaridor</option>
        <option value="seller">Sotuvchi</option>
      </select>
      {role === "seller" && <input {...register("shopName")} placeholder="Do'kon nomi" />}

      <label><input type="checkbox" {...register("terms")} /> Shartlarga roziman</label>
      {errors.terms && <span>{errors.terms.message}</span>}

      {errors.root && <p className="error">{errors.root.message}</p>}
      <button disabled={isSubmitting}>{isSubmitting ? "Yuborilmoqda..." : "Ro'yxatdan o'tish"}</button>
    </form>
  );
}
//  Zod (qoida+tur) + RHF (boshqaruv) + a11y + async + watch — to'liq production forma

import { useController, Control, useForm } from "react-hook-form";

// 1) Oddiy input uchun — register uzatiladi 2.16-bob:
function Field({ label, name, register, error, type = "text" }) {
  return (
    <div className="field">
      <label htmlFor={name}>{label}</label>
      <input id={name} type={type} {...register(name)}
             aria-invalid={error ? "true" : "false"} />
      {error && <span role="alert" className="error">{error.message}</span>}
    </div>
  );
}

// 2) Controlled UI-kutubxona maydoni uchun — useController 2.15-bob:
function SelectField({ name, control, label, options }) {
  const { field, fieldState } = useController({ name, control });
  return (
    <div className="field">
      <label>{label}</label>
      <select {...field}>
        {options.map((o) => <option key={o.value} value={o.value}>{o.label}</option>)}
      </select>
      {fieldState.error && <span role="alert">{fieldState.error.message}</span>}
    </div>
  );
}

function Form() {
  const { register, control, handleSubmit, formState: { errors } } = useForm();
  return (
    <form onSubmit={handleSubmit((d) => console.log(d))}>
      <Field label="Ism" name="name" register={register} error={errors.name} />
      <SelectField name="role" control={control} label="Rol"
        options={[{ value: "user", label: "Xaridor" }, { value: "admin", label: "Admin" }]} />
      <button>Saqlash</button>
    </form>
  );
}
//  Field (register) + SelectField (useController) — takror kodsiz, a11y markazlashgan (2.16)

const fullSchema = z.object({
  name: z.string().min(2, "Kamida 2 belgi"),
  email: z.string().email("Email noto'g'ri"),
  city: z.string().min(1, "Shahar majburiy"),
  card: z.string().length(16, "16 raqam"),
});
type WizardData = z.infer<typeof fullSchema>;

const stepFields: Record<number, (keyof WizardData)[]> = {
  0: ["name", "email"],     // 1-qadam maydonlari
  1: ["city"],              // 2-qadam
  2: ["card"],              // 3-qadam
};

function Wizard() {
  const [step, setStep] = useState(0);
  const { register, handleSubmit, trigger, formState: { errors, isSubmitting } } =
    useForm<WizardData>({ resolver: zodResolver(fullSchema), mode: "onBlur" });

  async function next() {
    const ok = await trigger(stepFields[step]);   // FAQAT joriy qadamni tekshir (2.19)
    if (ok) setStep((s) => s + 1);
  }

  const onSubmit = (data: WizardData) => console.log("Yakuniy:", data);

  return (
    <form onSubmit={handleSubmit(onSubmit)} noValidate>
      {step === 0 && (
        <>
          <input {...register("name")} placeholder="Ism" />
          {errors.name && <span role="alert">{errors.name.message}</span>}
          <input {...register("email")} placeholder="Email" />
          {errors.email && <span role="alert">{errors.email.message}</span>}
        </>
      )}
      {step === 1 && (
        <>
          <input {...register("city")} placeholder="Shahar" />
          {errors.city && <span role="alert">{errors.city.message}</span>}
        </>
      )}
      {step === 2 && (
        <>
          <input {...register("card")} placeholder="Karta raqami" />
          {errors.card && <span role="alert">{errors.card.message}</span>}
        </>
      )}

      <div>
        {step > 0 && <button type="button" onClick={() => setStep((s) => s - 1)}>Orqaga</button>}
        {step < 2
          ? <button type="button" onClick={next}>Keyingi</button>
          : <button type="submit" disabled={isSubmitting}>Tasdiqlash</button>}
      </div>
    </form>
  );
}
//  Bitta useForm (holat saqlanadi); trigger(qadam maydonlari) — qisman validatsiya (2.19)

const schema = z.object({
  username: z.string().min(3),
  email: z.string().email(),
  // optional — bo'lishi shart emas (undefined ruxsat):
  bio: z.string().max(200).optional(),
  // nullable — null bo'lishi mumkin (masalan DB'dan):
  middleName: z.string().nullable(),
  // array — obyektlar massivi (useFieldArray bilan — 2.13):
  skills: z.array(z.object({ name: z.string().min(1) })).min(1, "Kamida 1 ta ko'nikma"),
  password: z.string().min(8),
  confirm: z.string(),
  promoCode: z.string().optional(),
})
// superRefine — bir NECHTA maydonga bog'liq murakkab qoida (refine'dan kuchliroq):
.superRefine((data, ctx) => {
  if (data.password !== data.confirm) {
    ctx.addIssue({
      code: z.ZodIssueCode.custom,
      message: "Parollar mos emas",
      path: ["confirm"],                    // xato confirm maydoniga
    });
  }
  if (data.promoCode && data.promoCode.length !== 6) {
    ctx.addIssue({
      code: z.ZodIssueCode.custom,
      message: "Promo-kod 6 belgi bo'lsin",
      path: ["promoCode"],
    });
  }
});
//  superRefine — bir nechta shartli xato qo'shish (refine — bitta; superRefine — ctx bilan ko'p)
//  optional (undefined) / nullable (null) — farqli; array — dinamik ro'yxat validatsiyasi

 15 ta useState + qo'lda onChange/validatsiya (sekin, ko'p kod — 2.1)
 React Hook Form (register — kam re-render, kam kod — 2.3)

 har inputda qo'lda regex/shart (takror, xatoga moyil)
 Zod sxema (markazlashgan, type-safe, backend bilan bir xil — 2.6)

 <Select {...register("x")} />  (controlled komponentga register ishlamaydi — 2.9)
 <Controller render={({field}) => <Select {...field}/>} />

 key={index}  (ro'yxat o'zgarsa buziladi — 11.4: 2.13)
 key={field.id}  (RHF beradi — barqaror)

 qo'lda loading state + tugma disable unutish (ikki marta yuborish)
 isSubmitting (avtomatik) + disabled={isSubmitting} (2.12)

 server xatosini e'tiborsizlik (foydalanuvchi bilmaydi)
 setError("field"/"root", {message}) — formaga qaytar (2.12)