|
| 1 | +:: BASE_DOC :: |
| 2 | + |
| 3 | +## API |
| 4 | + |
| 5 | +### Form Props |
| 6 | + |
| 7 | +name | type | default | description | required |
| 8 | +-- | -- | -- | -- | -- |
| 9 | +style | Object | - | CSS(Cascading Style Sheets) | N |
| 10 | +custom-style | Object | - | CSS(Cascading Style Sheets),used to set style on virtual component | N |
| 11 | +colon | Boolean | false | \- | N |
| 12 | +data | Object | {} | Typescript: `FormData` | N |
| 13 | +error-message | Object | - | Typescript: `FormErrorMessage` | N |
| 14 | +label-align | String | right | options: left/right/top | N |
| 15 | +label-width | String / Number | '81px' | \- | N |
| 16 | +required-mark | Boolean | true | \- | N |
| 17 | +required-mark-position | String | left | Display position of required symbols。options: left/right | N |
| 18 | +reset-type | String | empty | options: empty/initial | N |
| 19 | +rules | Object | - | Typescript: `FormRules<FormData>` `type FormRules<T extends Data = any> = { [field in keyof T]?: Array<FormRule> }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/form/type.ts) | N |
| 20 | +scroll-to-first-error | String | - | options: ''/smooth/auto | N |
| 21 | +show-error-message | Boolean | true | \- | N |
| 22 | +submit-with-warning-message | Boolean | false | \- | N |
| 23 | + |
| 24 | +### Form Events |
| 25 | + |
| 26 | +name | params | description |
| 27 | +-- | -- | -- |
| 28 | +reset | `(detail: { e?: FormResetEvent })` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/common/common.ts) |
| 29 | +submit | `(context: SubmitContext<FormData>)` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/form/type.ts)。<br/>`interface SubmitContext<T extends Data = Data> { e?: FormSubmitEvent; validateResult: FormValidateResult<T>; firstError?: string; fields?: any }`<br/><br/>`type FormValidateResult<T> = boolean \| ValidateResultObj<T>`<br/><br/>`type ValidateResultObj<T> = { [key in keyof T]: boolean \| ValidateResultList }`<br/><br/>`type ValidateResultList = Array<AllValidateResult>`<br/><br/>`type AllValidateResult = CustomValidateObj \| ValidateResultType`<br/><br/>`interface ValidateResultType extends FormRule { result: boolean }`<br/><br/>`type ValidateResult<T> = { [key in keyof T]: boolean \| ErrorList }`<br/><br/>`type ErrorList = Array<FormRule>`<br/> |
| 30 | +validate | `(result: ValidateResultContext<FormData>)` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/form/type.ts)。<br/>`type ValidateResultContext<T extends Data> = Omit<SubmitContext<T>, 'e'>`<br/> |
| 31 | + |
| 32 | +### FormInstanceFunctions 组件实例方法 |
| 33 | + |
| 34 | +name | params | return | description |
| 35 | +-- | -- | -- | -- |
| 36 | +clear-validate | `(fields?: Array<keyof FormData>)` | \- | required |
| 37 | +reset | `(params?: FormResetParams<FormData>)` | \- | required。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/form/type.ts)。<br/>`interface FormResetParams<FormData> { type?: 'initial' \| 'empty'; fields?: Array<keyof FormData> }`<br/> |
| 38 | +set-validate-message | `(message: FormValidateMessage<FormData>)` | \- | required。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/form/type.ts)。<br/>`type FormValidateMessage<FormData> = { [field in keyof FormData]: FormItemValidateMessage[] }`<br/><br/>`interface FormItemValidateMessage { type: 'warning' \| 'error'; message: string }`<br/> |
| 39 | +submit | `(params?: { showErrorMessage?: boolean })` | \- | required |
| 40 | +validate | `(params?: FormValidateParams)` | `Promise<FormValidateResult<FormData>> ` | required。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/form/type.ts)。<br/>`interface FormValidateParams { fields?: Array<string>; showErrorMessage?: boolean; trigger?: ValidateTriggerType }`<br/><br/>`type ValidateTriggerType = 'blur' \| 'change' \| 'submit' \| 'all'`<br/><br/>`type FormValidateResult<T> = boolean \| ValidateResultObj<T>`<br/><br/>`type ValidateResultObj<T> = { [key in keyof T]: boolean \| ValidateResultList }`<br/><br/>`type ValidateResultList = Array<AllValidateResult>`<br/><br/>`type AllValidateResult = CustomValidateObj \| ValidateResultType`<br/><br/>`interface ValidateResultType extends FormRule { result: boolean }`<br/> |
| 41 | + |
| 42 | + |
| 43 | +### FormItem Props |
| 44 | + |
| 45 | +name | type | default | description | required |
| 46 | +-- | -- | -- | -- | -- |
| 47 | +style | Object | - | CSS(Cascading Style Sheets) | N |
| 48 | +custom-style | Object | - | CSS(Cascading Style Sheets),used to set style on virtual component | N |
| 49 | +arrow | Boolean | false | \- | N |
| 50 | +help | String | - | \- | N |
| 51 | +label | String | '' | \- | N |
| 52 | +label-align | String | - | options: left/right/top | N |
| 53 | +label-width | String / Number | - | \- | N |
| 54 | +name | String | - | \- | N |
| 55 | +required-mark | Boolean | undefined | \- | N |
| 56 | +rules | Array | - | Typescript: `Array<FormRule> `,[Form API Documents](./form?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/form-item/type.ts) | N |
| 57 | +show-error-message | Boolean | undefined | \- | N |
| 58 | + |
| 59 | +### FormItem Slots |
| 60 | + |
| 61 | +name | Description |
| 62 | +-- | -- |
| 63 | +help | \- |
| 64 | +label | \- |
| 65 | + |
| 66 | +### FormRule |
| 67 | + |
| 68 | +name | type | default | description | required |
| 69 | +-- | -- | -- | -- | -- |
| 70 | +boolean | Boolean | - | \- | N |
| 71 | +date | Boolean / Object | - | Typescript: `boolean \| IsDateOptions` `interface IsDateOptions { format: string; strictMode: boolean; delimiters: string[] }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/form/type.ts) | N |
| 72 | +email | Boolean / Object | - | Typescript: `boolean \| IsEmailOptions` `import { IsEmailOptions } from 'validator/es/lib/isEmail'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/form/type.ts) | N |
| 73 | +enum | Array | - | Typescript: `Array<string>` | N |
| 74 | +idcard | Boolean | - | \- | N |
| 75 | +len | Number / Boolean | - | \- | N |
| 76 | +max | Number / Boolean | - | \- | N |
| 77 | +message | String | - | \- | N |
| 78 | +min | Number / Boolean | - | \- | N |
| 79 | +number | Boolean | - | \- | N |
| 80 | +pattern | String / Object | - | Typescript: `RegExp \| string` | N |
| 81 | +required | Boolean | - | \- | N |
| 82 | +telnumber | Boolean | - | \- | N |
| 83 | +trigger | String | change | Typescript: `ValidateTriggerType` | N |
| 84 | +type | String | error | options: error/warning | N |
| 85 | +url | Boolean / Object | - | Typescript: `boolean \| IsURLOptions` `import { IsURLOptions } from 'validator/es/lib/isURL'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/form/type.ts) | N |
| 86 | +validator | Function | - | Typescript: `CustomValidator` `type CustomValidator = (val: ValueType, context?: { formData: Data , name: string }) => CustomValidateResolveType \| Promise<CustomValidateResolveType>` `type CustomValidateResolveType = boolean \| CustomValidateObj` `interface CustomValidateObj { result: boolean; message: string; type?: 'error' \| 'warning' \| 'success' }` `type ValueType = any`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/form/type.ts) | N |
| 87 | +whitespace | Boolean | - | \- | N |
| 88 | + |
| 89 | +### FormErrorMessage |
| 90 | + |
| 91 | +name | type | default | description | required |
| 92 | +-- | -- | -- | -- | -- |
| 93 | +boolean | String | - | \- | N |
| 94 | +date | String | - | \- | N |
| 95 | +enum | String | - | \- | N |
| 96 | +idcard | String | - | \- | N |
| 97 | +len | String | - | \- | N |
| 98 | +max | String | - | \- | N |
| 99 | +min | String | - | \- | N |
| 100 | +number | String | - | \- | N |
| 101 | +pattern | String | - | \- | N |
| 102 | +required | String | - | \- | N |
| 103 | +telnumber | String | - | \- | N |
| 104 | +url | String | - | \- | N |
| 105 | +validator | String | - | \- | N |
| 106 | +whitespace | String | - | \- | N |
0 commit comments