Form

react-hook-form-ის კომპოზიცია: ველის იარლიყი, აღწერა და შეცდომა ავტომატურად უკავშირდება კონტროლს. ქვემოთ დაჯავშნის ფორმა მოწმდება Zod-ით.

მაგალითი

@llc-conciergia/ui/form

const schema = z.object({ name: z.string().min(2, "შეიყვანეთ მინიმუმ 2 სიმბოლო") });
const form = useForm({ resolver: zodResolver(schema), defaultValues: { name: "" } });
<Form {...form}>
  <form onSubmit={form.handleSubmit(setValues)}>
    <FormField control={form.control} name="name" render={({ field }) => (
      <FormItem>
        <FormLabel>სახელი</FormLabel>
        <FormControl><Input {...field} /></FormControl>
        <FormDescription>სტუმრის სახელი</FormDescription>
        <FormMessage />
      </FormItem>
    )} />
    <Button type="submit">დაჯავშნა</Button>
  </form>
</Form>

ინსტალაცია

terminal

pnpm add @llc-conciergia/ui

იმპორტი

import * as Component from "@llc-conciergia/ui/form";

Conciergia CLI

npx @llc-conciergia/cli add form

shadcn CLI

npx shadcn@latest add https://ui.conciergia.co/r/form.json

შენიშვნები

დააყენეთ react-hook-form; Zod მაგალითისთვის საჭიროა zod და @hookform/resolvers. შეცდომების ენა განსაზღვრეთ სქემაში — FormMessage შეტყობინებას არ თარგმნის. FormControl-ის შვილი ref-სა და ARIA ატრიბუტებს რეალურ ინტერაქტიულ ელემენტზე უნდა გადასცემდეს. Select-ს onValueChange გადაეცემა root-ზე, FormControl კი SelectTrigger-ს ეხვევა; DatePicker-ს მიეცით value და onValueChange. გარდაქმნის მქონე სქემისთვის გამოიყენეთ useForm<z.input<typeof schema>, unknown, z.output<typeof schema>>.

Props

Prop	ტიპი	ნაგულისხმევი	აღწერა
Form	FormProvider props	—	მიიღებს useForm-ის შედეგს. HTML form-ს თავად არ ქმნის.
FormField	ControllerProps<TValues, TName, TOutput>	—	name, control, render, rules, disabled, defaultValue და shouldUnregister.
FormItem	div props	—	ერთ ველს ანიჭებს უნიკალურ ID-ებსა და განლაგებას.
FormLabel	Label props	—	აკავშირებს htmlFor-ს კონტროლთან და შეცდომას აღნიშნავს data-invalid-ით.
FormControl	{ children: ReactElement }	—	ერთ შვილს გადასცემს id, aria-invalid და aria-describedby-ს; ინარჩუნებს შვილის ref-სა და მოვლენებს.
FormDescription	p props	—	არასავალდებულო ინსტრუქცია, რომელიც კონტროლის აღწერას ემატება.
FormMessage	p props	—	აჩვენებს ველის შეცდომას ან children-ს; ცარიელი ტექსტისას არაფერს რენდერს.
useFormField	() => field state & IDs	—	error, invalid, isDirty, isTouched, isValidating, name, formItemId, formLabelId, formDescriptionId, formMessageId, labelMounted, descriptionMounted, messageMounted. გამოიყენება Form/FormField/FormItem-ის შიგნით.