کنترل فرم (Form Control)
فرم برای جمعآوری و اعتبارسنجی دادههای ورودی کاربر استفاده میشود. ما از react-hook-form به عنوان کتابخانه کنترل فرم استفاده میکنیم. بیشتر کامپوننتهای فرم ما با react-hook-form یا دیگر کتابخانههای فرم سازگار هستند.
پایه (Basic)
چیدمان فرم (Form Layout)
Form یا FormContainer به ما اجازه میدهد تمام FormItem ها را از طریق یک prop layout کنترل کنیم.اندازه فرم (Form Size)
Form یا FormContainer به ما امکان کنترل اندازه FormItem را نیز میدهد.محتوای اضافی برچسب (Label Extra)
extra در FormItem اضافه کنیم.اعتبارسنجی سطح فیلد (Field-level Validation)
اعتبارسنجی شِما (Schema Validation)
اعتبارسنجی وابسته (Dependent Validation)
اعتبارسنجی ناهمگام (Async Validation)
فرم پویا (Dynamic Form)
FieldArray.کنترل فرم ترکیبی (Mixed Form Control)
ریاکت هوک فرم
کتابخانه React Hook Form یک راهحل قدرتمند و انعطافپذیر برای مدیریت فرمها در برنامههای ریاکت است. این ابزار مدیریت فرم را با ارائه مجموعهای از هوکها و ابزارهایی که فرآیند گرفتن دادهها، اعتبارسنجی و ارسال فرمها را ساده میکند، آسان میسازد. با استفاده از useForm، شما بهراحتی میتوانید وضعیت فرم را مدیریت کنید، تغییرات ورودی را پردازش کنید، اعتبارسنجی انجام دهید و فرمها را با حداقل کد اضافی ارسال کنید. برای اطلاعات بیشتر و مثالها بهمستنداتمراجعه کنید.
زود
زود یک کتابخانه تعریف اسکیما و اعتبارسنجی است که مبتنی بر تایپاسکریپت طراحی شده است. منظور از "اسکیما" هر نوع دادهای، از یک رشته ساده تا یک شیء پیچیده تودرتو است. زود برای کاربرپسندترین تجربه ممکن طراحی شده است. هدف این ابزار حذف تعریفهای تکراری تایپهاست. با زود، شما یک بار اعتبارسنج را تعریف میکنید و زود بهطور خودکار نوع استاتیک تایپاسکریپت را استنتاج میکند. همچنین ترکیب تایپهای ساده به ساختارهای داده پیچیده بسیار آسان است. برای اطلاعات بیشتر و مثالها بهمستندات رسمیمراجعه کنید.
API
فرم کانتینر (FormContainer)
| ویژگی | توضیحات | نوع | پیشفرض |
|---|---|---|---|
| layout | چیدمان فرم | 'horizontal' | 'vertical' | 'inline' | 'vertical' |
| size | اندازه آیتم فرم | 'lg' | 'md' | 'sm' | 'md' |
| labelWidth | عرض برچسب فرم | string | number | 100 |
فرم ایتم (FormItem)
| ویژگی | توضیحات | نوع | پیشفرض |
|---|---|---|---|
| layout | چیدمان فرم | 'horizontal' | 'vertical' | 'inline' | - |
| size | اندازه آیتم فرم | 'lg' | 'md' | 'sm' | - |
| labelWidth | عرض برچسب فرم | string | number | - |
| errorMessage | پیام خطا که هنگام فعال شدن invalid نمایش داده میشود | string | - |
| invalid | وضعیت اعتبارسنجی آیتم فرم | boolean | - |
| asterisk | آیا علامت ستاره در کنار متن برچسب نمایش داده شود | boolean | - |
| extra | محتوای سفارشی اضافی در کنار متن برچسب | string | ReactNode | - |
| htmlFor | تنظیم مقدار htmlFor برای برچسب فرعی | string | - |
فهرست مطالب
- پایه (Basic)
- چیدمان فرم (Form Layout)
- اندازه فرم (Form Size)
- محتوای اضافی برچسب (Label Extra)
- اعتبارسنجی سطح فیلد (Field-level Validation)
- اعتبارسنجی شِما (Schema Validation)
- اعتبارسنجی وابسته (Dependent Validation)
- اعتبارسنجی ناهمگام (Async Validation)
- فرم پویا (Dynamic Form)
- کنترل فرم ترکیبی (Mixed Form Control)