Formisch

Copyimport { getInput, insert, reset, submit } from "@formisch/react"

Copy// خواندن مقدار یک فیلد
const email = getInput(form, { path: ["email"] })
 
// بازنشانی فرم با مقادیر اولیهٔ جدید
reset(form, { initialInput: { email: "", password: "" } })
 
// جابه‌جایی یک آیتم در آرایهٔ فیلد
move(form, { path: ["items"], from: 0, to: 3 })

Copy<Form of={form} onSubmit={handleSubmit}>
  <FieldGroup>
    <FormischField of={form} path={["title"]}>
      {(field) => (
        <Field data-invalid={field.errors !== null}>
          <FieldLabel htmlFor="form-title">عنوان باگ</FieldLabel>
          <Input
            {...field.props}
            id="form-title"
            value={field.input}
            aria-invalid={field.errors !== null}
            placeholder="دکمهٔ ورود در موبایل کار نمی‌کند"
            autoComplete="off"
          />
          <FieldDescription>
            یک عنوان کوتاه برای گزارش باگ بنویسید.
          </FieldDescription>
          {field.errors && (
            <FieldError errors={field.errors.map((message) => ({ message }))} />
          )}
        </Field>
      )}
    </FormischField>
  </FieldGroup>
</Form>

Copyimport * as v from "valibot"
 
const FormSchema = v.object({
  title: v.pipe(
    v.string(),
    v.minLength(5, "عنوان باگ باید حداقل ۵ کاراکتر باشد."),
    v.maxLength(32, "عنوان باگ باید حداکثر ۳۲ کاراکتر باشد.")
  ),
  description: v.pipe(
    v.string(),
    v.minLength(20, "توضیحات باید حداقل ۲۰ کاراکتر باشد."),
    v.maxLength(100, "توضیحات باید حداکثر ۱۰۰ کاراکتر باشد.")
  ),
})

Copyimport { Form, Field as FormischField, useForm } from "@formisch/react"
import type { SubmitHandler } from "@formisch/react"
import * as v from "valibot"
 
const FormSchema = v.object({
  title: v.pipe(
    v.string(),
    v.minLength(5, "عنوان باگ باید حداقل ۵ کاراکتر باشد."),
    v.maxLength(32, "عنوان باگ باید حداکثر ۳۲ کاراکتر باشد.")
  ),
  description: v.pipe(
    v.string(),
    v.minLength(20, "توضیحات باید حداقل ۲۰ کاراکتر باشد."),
    v.maxLength(100, "توضیحات باید حداکثر ۱۰۰ کاراکتر باشد.")
  ),
})
 
export function BugReportForm() {
  const form = useForm({
    schema: FormSchema,
    initialInput: {
      title: "",
      description: "",
    },
  })
 
  const handleSubmit: SubmitHandler<typeof FormSchema> = (output) => {
    // با مقادیر اعتبارسنجی‌شدهٔ فرم کاری انجام دهید.
    console.log(output)
  }
 
  return (
    <Form of={form} onSubmit={handleSubmit}>
      {/* ... */}
      {/* فرم را اینجا بسازید */}
      {/* ... */}
    </Form>
  )
}

Copyimport { useForm } from "@formisch/react"
 
const FormSchema = v.object({
  title: v.string(),
  description: v.optional(v.string()),
})
 
export function ExampleForm() {
  const form = useForm({
    schema: FormSchema,
    initialInput: {
      title: "",
      description: "",
    },
  })
}

Copyconst form = useForm({
  schema: FormSchema,
  validate: "blur",
  revalidate: "input",
})

Copy<FormischField of={form} path={["email"]}>
  {(field) => (
    <Field data-invalid={field.errors !== null}>
      <FieldLabel htmlFor="form-email">ایمیل</FieldLabel>
      <Input
        {...field.props}
        id="form-email"
        value={field.input}
        type="email"
        aria-invalid={field.errors !== null}
      />
      {field.errors && (
        <FieldError errors={field.errors.map((message) => ({ message }))} />
      )}
    </Field>
  )}
</FormischField>

Copy<FormischField of={form} path={["username"]}>
  {(field) => (
    <Field data-invalid={field.errors !== null}>
      <FieldLabel htmlFor="form-username">نام کاربری</FieldLabel>
      <Input
        {...field.props}
        id="form-username"
        value={field.input}
        aria-invalid={field.errors !== null}
      />
      {field.errors && (
        <FieldError errors={field.errors.map((message) => ({ message }))} />
      )}
    </Field>
  )}
</FormischField>

Copy<FormischField of={form} path={["about"]}>
  {(field) => (
    <Field data-invalid={field.errors !== null}>
      <FieldLabel htmlFor="form-about">دربارهٔ شما</FieldLabel>
      <Textarea
        {...field.props}
        id="form-about"
        value={field.input}
        aria-invalid={field.errors !== null}
        placeholder="من مهندس نرم‌افزار هستم..."
        className="min-h-16"
      />
      <FieldDescription>
        اطلاعات بیشتری دربارهٔ خودتان بنویسید. از این اطلاعات برای شخصی‌سازی
        تجربهٔ شما استفاده خواهد شد.
      </FieldDescription>
      {field.errors && (
        <FieldError errors={field.errors.map((message) => ({ message }))} />
      )}
    </Field>
  )}
</FormischField>

Copy<FormischField of={form} path={["language"]}>
  {(field) => (
    <Field orientation="responsive" data-invalid={field.errors !== null}>
      <FieldContent>
        <FieldLabel htmlFor="form-language">زبان گفتاری</FieldLabel>
        <FieldDescription>
          برای دریافت نتیجهٔ بهتر، زبانی را انتخاب کنید که به آن صحبت می‌کنید.
        </FieldDescription>
        {field.errors && (
          <FieldError errors={field.errors.map((message) => ({ message }))} />
        )}
      </FieldContent>
      <Select value={field.input} onValueChange={field.onChange}>
        <SelectTrigger
          id="form-language"
          aria-invalid={field.errors !== null}
          className="min-w-[120px]"
          dir="rtl"
        >
          <SelectValue placeholder="انتخاب کنید" />
        </SelectTrigger>
        <SelectContent position="item-aligned" dir="rtl">
          <SelectItem value="auto">خودکار</SelectItem>
          <SelectItem value="en">English</SelectItem>
        </SelectContent>
      </Select>
    </Field>
  )}
</FormischField>

Copy<FormischField of={form} path={["tasks"]}>
  {(field) => (
    <FieldSet>
      <FieldLegend variant="label">وظایف</FieldLegend>
      <FieldDescription>
        برای به‌روزرسانی وظایفی که ایجاد کرده‌اید، اعلان دریافت کنید.
      </FieldDescription>
      <FieldGroup data-slot="checkbox-group">
        {tasks.map((task) => (
          <Field
            key={task.id}
            orientation="horizontal"
            data-invalid={field.errors !== null}
          >
            <Checkbox
              id={`form-checkbox-${task.id}`}
              aria-invalid={field.errors !== null}
              checked={field.input?.includes(task.id) ?? false}
              onCheckedChange={(checked) => {
                const current = field.input ?? []
                field.onChange(
                  checked === true
                    ? [...current, task.id]
                    : current.filter((value) => value !== task.id)
                )
              }}
            />
            <FieldLabel
              htmlFor={`form-checkbox-${task.id}`}
              className="font-normal"
            >
              {task.label}
            </FieldLabel>
          </Field>
        ))}
      </FieldGroup>
      {field.errors && (
        <FieldError errors={field.errors.map((message) => ({ message }))} />
      )}
    </FieldSet>
  )}
</FormischField>

Copy<FormischField of={form} path={["plan"]}>
  {(field) => (
    <FieldSet>
      <FieldLegend>پلن</FieldLegend>
      <FieldDescription>
        هر زمان بخواهید می‌توانید پلن خود را ارتقا یا کاهش دهید.
      </FieldDescription>
      <RadioGroup value={field.input} onValueChange={field.onChange}>
        {plans.map((plan) => (
          <FieldLabel key={plan.id} htmlFor={`form-radiogroup-${plan.id}`}>
            <Field
              orientation="horizontal"
              data-invalid={field.errors !== null}
            >
              <FieldContent>
                <FieldTitle>{plan.title}</FieldTitle>
                <FieldDescription>{plan.description}</FieldDescription>
              </FieldContent>
              <RadioGroupItem
                value={plan.id}
                id={`form-radiogroup-${plan.id}`}
                aria-invalid={field.errors !== null}
              />
            </Field>
          </FieldLabel>
        ))}
      </RadioGroup>
      {field.errors && (
        <FieldError errors={field.errors.map((message) => ({ message }))} />
      )}
    </FieldSet>
  )}
</FormischField>

Copy<FormischField of={form} path={["twoFactor"]}>
  {(field) => (
    <Field orientation="horizontal" data-invalid={field.errors !== null}>
      <FieldContent>
        <FieldLabel htmlFor="form-twoFactor">
          احراز هویت چندمرحله‌ای
        </FieldLabel>
        <FieldDescription>
          احراز هویت چندمرحله‌ای را برای افزایش امنیت حساب فعال کنید.
        </FieldDescription>
        {field.errors && (
          <FieldError errors={field.errors.map((message) => ({ message }))} />
        )}
      </FieldContent>
      <Switch
        id="form-twoFactor"
        checked={field.input ?? false}
        onCheckedChange={field.onChange}
        aria-invalid={field.errors !== null}
        dir="ltr"
      />
    </Field>
  )}
</FormischField>

Copy<Button type="button" variant="outline" onClick={() => reset(form)}>
  بازنشانی
</Button>

Copy// بازنشانی با مجموعه‌ای جدید از مقادیر اولیه
reset(form, {
  initialInput: { title: "", description: "" },
})
 
// همگام‌سازی مقدار پایه با داده‌های جدید سرور و حفظ تغییرات کاربر
reset(form, {
  initialInput: serverData,
  keepInput: true,
})

Copyimport {
  Field as FormischField,
  FieldArray,
  insert,
  remove,
} from "@formisch/react"
 
export function ExampleForm() {
  // ... تنظیمات فرم
 
  return (
    <FieldArray of={form} path={["emails"]}>
      {(fieldArray) => (
        <FieldGroup className="gap-4">
          {fieldArray.items.map((item, index) => (
            <FormischField
              key={item}
              of={form}
              path={["emails", index, "address"]}
            >
              {(field) => /* ... */}
            </FormischField>
          ))}
        </FieldGroup>
      )}
    </FieldArray>
  )
}

Copy<FieldSet className="gap-4">
  <FieldLegend variant="label">آدرس‌های ایمیل</FieldLegend>
  <FieldDescription>
    حداکثر ۵ آدرس ایمیل اضافه کنید تا بتوانیم با شما در تماس باشیم.
  </FieldDescription>
  <FieldGroup className="gap-4">{/* آیتم‌های آرایه اینجا قرار می‌گیرند */}</FieldGroup>
</FieldSet>

Copy<Button
  type="button"
  variant="outline"
  size="sm"
  onClick={() =>
    insert(form, { path: ["emails"], initialInput: { address: "" } })
  }
  disabled={fieldArray.items.length >= 5}
>
  افزودن آدرس ایمیل
</Button>

Copyimport { remove } from "@formisch/react"
 
{
  fieldArray.items.length > 1 && (
    <InputGroupAddon align="inline-end">
      <InputGroupButton
        type="button"
        variant="ghost"
        size="icon-xs"
        onClick={() => remove(form, { path: ["emails"], at: index })}
        aria-label={`حذف ایمیل ${index + 1}`}
      >
        <XIcon />
      </InputGroupButton>
    </InputGroupAddon>
  )
}

Copyconst FormSchema = v.object({
  emails: v.pipe(
    v.array(
      v.object({
        address: v.pipe(
          v.string(),
          v.nonEmpty("یک آدرس ایمیل وارد کنید."),
          v.email("یک آدرس ایمیل معتبر وارد کنید.")
        ),
      })
    ),
    v.minLength(1, "حداقل یک آدرس ایمیل اضافه کنید."),
    v.maxLength(5, "حداکثر ۵ آدرس ایمیل می‌توانید اضافه کنید.")
  ),
})