فرم نشانی

import { AddressForm } from "@kashi-ui/react";
import { EMPTY_ADDRESS, formatAddress, type IranAddress } from "@kashi-ui/persian";

فرم کامل

با انتخاب استان فقط شهرهای همان استان می‌آیند و با عوض شدن استان، شهرِ نامربوط پاک می‌شود. اگر کاربر اول شهر را بنویسد، استان خودکار پر می‌شود. کد پستی هنگام تایپ قالب می‌گیرد و با قواعد کد پستی ایران بررسی می‌شود.

const [address, setAddress] = useState<IranAddress>(EMPTY_ADDRESS);

<AddressForm value={address} onChange={setAddress} name="shipping" />
<p>{formatAddress(address)}</p>

مقدار فرم یک شیء IranAddress است:

interface IranAddress {
  province: string | null; // «اصفهان»
  city: string | null;     // «کاشان»
  street: string;          // «خیابان امیرکبیر، کوچهٔ ۱۲»
  plaque: string;
  unit: string;
  postalCode: string;      // ده رقم لاتین، «8713714568»
}

formatAddress همین شیء را در یک خط با ارقام فارسی برمی‌گرداند، مثل «اصفهان، کاشان، خیابان امیرکبیر، پلاک ۱۲، واحد ۳، کد پستی ۸۷۱۳۷-۱۴۵۶۸»؛ برای فاکتور، رسید یا صفحهٔ تأیید سفارش.

با نقشه

با map نقشهٔ ایران کنار فیلدها می‌آید و استان را می‌شود روی نقشه هم انتخاب کرد. در عرض کم، نقشه زیر فیلدها می‌رود.

<AddressForm value={address} onChange={setAddress} map legend="نشانی تحویل" />

ارسال با فرم HTML

با name هر فیلد در فرم HTML هم فرستاده می‌شود: name="shipping" می‌شود shipping[province]، shipping[city]، shipping[street]، shipping[plaque]، shipping[unit] و shipping[postalCode]. این همان قالبی است که Laravel و PHP به‌صورت آرایه می‌خوانند. خطاهای اعتبارسنجی سرور را با errors زیر هر فیلد نشان دهید:

<AddressForm name="shipping" errors={{ plaque: "پلاک را بنویسید." }} />

انتخاب شهر

CitySelect جدا هم در دسترس است. با province فقط شهرهای همان استان را نشان می‌دهد و بدون آن همهٔ شهرها را با نام استانشان. جستجو «علی آباد»، «علی‌آباد» و «علیآباد» را یکی می‌داند. شهری که در فهرست نیست (مثلاً شهرهای تازه‌تأسیس) با همان نامی که کاربر نوشته پذیرفته می‌شود؛ برای بستن این امکان allowCustom={false} بدهید.