Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(form): formErrorMessage add whitespace #3067

Merged
merged 1 commit into from
Aug 31, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 14 additions & 10 deletions src/form/form.en-US.md
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
:: BASE_DOC ::

## API

### Form Props

name | type | default | description | required
-- | -- | -- | -- | --
className | String | - | 类名 | N
style | Object | - | 样式,Typescript:`React.CSSProperties` | N
className | String | - | className of component | N
style | Object | - | CSS(Cascading Style Sheets),Typescript:`React.CSSProperties` | N
colon | Boolean | false | \- | N
disabled | Boolean | undefined | \- | N
errorMessage | Object | - | Typescript:`FormErrorMessage` | N
Expand All @@ -32,8 +33,8 @@ onValuesChange | Function | | Typescript:`(changedValues: Record<string, unkn

name | params | return | description
-- | -- | -- | --
className | String | - | 类名 | N
style | Object | - | 样式,Typescript:`React.CSSProperties` | N
className | String | - | className of component | N
style | Object | - | CSS(Cascading Style Sheets),Typescript:`React.CSSProperties` | N
clearValidate | `(fields?: Array<keyof FormData>)` | \- | required
currentElement | \- | `HTMLFormElement` | required
getFieldValue | `(field: NamePath) ` | `unknown` | required
Expand All @@ -43,15 +44,16 @@ setFields | `(fields: FieldData[])` | \- | required。Typescript:`(fields: Fie
setFieldsValue | `(field: Data)` | \- | required
setValidateMessage | `(message: FormValidateMessage<FormData>)` | \- | required。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/form/type.ts)。<br/>`type FormValidateMessage<FormData> = { [field in keyof FormData]: FormItemValidateMessage[] }`<br/><br/>`interface FormItemValidateMessage { type: 'warning' \| 'error'; message: string }`<br/>
submit | `(params?: { showErrorMessage?: boolean })` | \- | required
validate | `(params?: FormValidateParams)` | `Promise<FormValidateResult<FormData>>` | required。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/form/type.ts)。<br/>`interface FormValidateParams { fields?: Array<string>; showErrorMessage?: boolean; trigger?: ValidateTriggerType }`<br/><br/>`type ValidateTriggerType = 'blur' \| 'change' \| 'all'`<br/>
validate | `(params?: FormValidateParams)` | `Promise<FormValidateResult<FormData>>` | required。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/form/type.ts)。<br/>`interface FormValidateParams { fields?: Array<string>; showErrorMessage?: boolean; trigger?: ValidateTriggerType }`<br/><br/>`type ValidateTriggerType = 'blur' \| 'change' \| 'submit' \| 'all'`<br/>
validateOnly | `(params?: Pick<FormValidateParams, 'fields' \| 'trigger'>)` | `Promise<FormValidateResult<FormData>>` | required


### FormItem Props

name | type | default | description | required
-- | -- | -- | -- | --
className | String | - | 类名 | N
style | Object | - | 样式,Typescript:`React.CSSProperties` | N
className | String | - | className of component | N
style | Object | - | CSS(Cascading Style Sheets),Typescript:`React.CSSProperties` | N
for | String | - | \- | N
help | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
initialData | String / Number / Object / Array | - | Typescript:`InitialData` `type InitialData = any`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/form/type.ts) | N
Expand All @@ -69,12 +71,13 @@ successBorder | Boolean | false | \- | N
tips | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
valueFormat | Function | - | Triggered when user interaction results in data changes, used to format data。Typescript:`FormItemFormatType` `type FormItemFormatType = (value: any) => any`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/form/type.ts) | N


### FormList Props

name | type | default | description | required
-- | -- | -- | -- | --
className | String | - | 类名 | N
style | Object | - | 样式,Typescript:`React.CSSProperties` | N
className | String | - | className of component | N
style | Object | - | CSS(Cascading Style Sheets),Typescript:`React.CSSProperties` | N
children | Function | - | Typescript:`(fields: FormListField[], operation: FormListFieldOperation) => React.ReactNode` `type FormListField = { key: number; name: number; isListField: boolean }` `type FormListFieldOperation = { add: (defaultValue?: any, insertIndex?: number) => void, remove: (index: number \| number[]) => void, move: (from: number, to: number) => void }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/form/type.ts) | N
initialData | Array | - | Typescript:`Array<any>` | N
name | String / Number / Array | - | Typescript:`NamePath` | N
Expand All @@ -97,7 +100,7 @@ number | Boolean | - | \- | N
pattern | Object | - | Typescript:`RegExp` | N
required | Boolean | - | \- | N
telnumber | Boolean | - | \- | N
trigger | String | change | options: change/blur/submit | N
trigger | String | change | Typescript:`ValidateTriggerType` | N
type | String | error | options: error/warning | N
url | Boolean / Object | - | Typescript:`boolean \| IsURLOptions` `import { IsURLOptions } from 'validator/es/lib/isURL'`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/form/type.ts) | N
validator | Function | - | Typescript:`CustomValidator` `type CustomValidator = (val: ValueType) => 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-react/blob/develop/src/form/type.ts) | N
Expand All @@ -120,3 +123,4 @@ required | String | - | \- | N
telnumber | String | - | \- | N
url | String | - | \- | N
validator | String | - | \- | N
whitespace | String | - | \- | N
18 changes: 11 additions & 7 deletions src/form/form.md
Original file line number Diff line number Diff line change
Expand Up @@ -91,9 +91,10 @@ Form 组件设计的初衷是为了解放开发者配置大量的 `value`、`onC
```

## API

### Form Props

名称 | 类型 | 默认值 | 说明 | 必传
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
className | String | - | 类名 | N
style | Object | - | 样式,TS 类型:`React.CSSProperties` | N
Expand Down Expand Up @@ -133,12 +134,13 @@ setFields | `(fields: FieldData[])` | \- | 必需。设置多组字段状态。T
setFieldsValue | `(field: Data)` | \- | 必需。设置表单字段值
setValidateMessage | `(message: FormValidateMessage<FormData>)` | \- | 必需。设置自定义校验结果,如远程校验信息直接呈现。注意需要在组件挂载结束后使用该方法。`FormData` 指表单数据泛型。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/form/type.ts)。<br/>`type FormValidateMessage<FormData> = { [field in keyof FormData]: FormItemValidateMessage[] }`<br/><br/>`interface FormItemValidateMessage { type: 'warning' \| 'error'; message: string }`<br/>
submit | `(params?: { showErrorMessage?: boolean })` | \- | 必需。提交表单,表单里面没有提交按钮`<button type=\"submit\" />`时可以使用该方法。`showErrorMessage` 表示是否在提交校验不通过时显示校验不通过的原因,默认显示。该方法会触发 `submit` 事件
validate | `(params?: FormValidateParams)` | `Promise<FormValidateResult<FormData>>` | 必需。校验函数,包含错误文本提示等功能。泛型 `FormData` 表示表单数据 TS 类型。<br/>【关于参数】`params.fields` 表示校验字段,如果设置了 `fields`,本次校验将仅对这些字段进行校验。`params.trigger` 表示本次触发校验的范围,'params.trigger = blur' 表示只触发校验规则设定为 trigger='blur' 的字段,'params.trigger = change' 表示只触发校验规则设定为 trigger='change' 的字段,默认触发全范围校验。`params.showErrorMessage` 表示校验结束后是否显示错误文本提示,默认显示。<br />【关于返回值】返回值为 true 表示校验通过;如果校验不通过,返回值为校验结果列表。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/form/type.ts)。<br/>`interface FormValidateParams { fields?: Array<string>; showErrorMessage?: boolean; trigger?: ValidateTriggerType }`<br/><br/>`type ValidateTriggerType = 'blur' \| 'change' \| 'all'`<br/>
validate | `(params?: FormValidateParams)` | `Promise<FormValidateResult<FormData>>` | 必需。校验函数,包含错误文本提示等功能。泛型 `FormData` 表示表单数据 TS 类型。<br/>【关于参数】`params.fields` 表示校验字段,如果设置了 `fields`,本次校验将仅对这些字段进行校验。`params.trigger` 表示本次触发校验的范围,'params.trigger = blur' 表示只触发校验规则设定为 trigger='blur' 的字段,'params.trigger = change' 表示只触发校验规则设定为 trigger='change' 的字段,默认触发全范围校验。`params.showErrorMessage` 表示校验结束后是否显示错误文本提示,默认显示。<br />【关于返回值】返回值为 true 表示校验通过;如果校验不通过,返回值为校验结果列表。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/form/type.ts)。<br/>`interface FormValidateParams { fields?: Array<string>; showErrorMessage?: boolean; trigger?: ValidateTriggerType }`<br/><br/>`type ValidateTriggerType = 'blur' \| 'change' \| 'submit' \| 'all'`<br/>
validateOnly | `(params?: Pick<FormValidateParams, 'fields' \| 'trigger'>)` | `Promise<FormValidateResult<FormData>>` | 必需。纯净的校验函数,仅返回校验结果,不对组件进行任何操作。泛型 `FormData` 表示表单数据 TS 类型。参数和返回值含义同 `validate` 方法


### FormItem Props

名称 | 类型 | 默认值 | 说明 | 必传
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
className | String | - | 类名 | N
style | Object | - | 样式,TS 类型:`React.CSSProperties` | N
Expand All @@ -159,9 +161,10 @@ successBorder | Boolean | false | 是否显示校验成功的边框,默认不
tips | TNode | - | 自定义提示内容,样式跟随 `status` 变动,可在需要完全自主控制校验规则时使用。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
valueFormat | Function | - | 当用户交互产生数据变化时触发,用于格式化数据。TS 类型:`FormItemFormatType` `type FormItemFormatType = (value: any) => any`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/form/type.ts) | N


### FormList Props

名称 | 类型 | 默认值 | 说明 | 必传
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
className | String | - | 类名 | N
style | Object | - | 样式,TS 类型:`React.CSSProperties` | N
Expand All @@ -172,7 +175,7 @@ rules | Object / Array | - | 表单字段校验规则。TS 类型:`{ [field in

### FormRule

名称 | 类型 | 默认值 | 说明 | 必传
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
boolean | Boolean | - | 内置校验方法,校验值类型是否为布尔类型,示例:`{ boolean: true, message: '数据类型必须是布尔类型' }` | N
date | Boolean / Object | - | 内置校验方法,校验值是否为日期格式,[参数文档](https://github.com/validatorjs/validator.js),示例:`{ date: { delimiters: '-' }, message: '日期分隔线必须是短横线(-)' }`。TS 类型:`boolean \| IsDateOptions` `interface IsDateOptions { format: string; strictMode: boolean; delimiters: string[] }`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/form/type.ts) | N
Expand All @@ -187,15 +190,15 @@ number | Boolean | - | 内置校验方法,校验值是否为数字(1.2 、 1
pattern | Object | - | 内置校验方法,校验值是否符合正则表达式匹配结果,示例:`{ pattern: /@qq.com/, message: '请输入 QQ 邮箱' }`。TS 类型:`RegExp` | N
required | Boolean | - | 内置校验方法,校验值是否已经填写。该值为 true,默认显示必填标记,可通过设置 `requiredMark: false` 隐藏必填标记 | N
telnumber | Boolean | - | 内置校验方法,校验值是否为手机号码,校验正则为 `/^1[3-9]\d{9}$/`,示例:`{ telnumber: true, message: '请输入正确的手机号码' }` | N
trigger | String | change | 校验触发方式。可选项:change/blur/submit | N
trigger | String | change | 校验触发方式。TS 类型:`ValidateTriggerType` | N
type | String | error | 校验未通过时呈现的错误信息类型,有 告警信息提示 和 错误信息提示 等两种。可选项:error/warning | N
url | Boolean / Object | - | 内置校验方法,校验值是否为网络链接地址,[参数文档](https://github.com/validatorjs/validator.js),示例:`{ url: { protocols: ['http','https','ftp'] }, message: '请输入正确的 Url 地址' }`。TS 类型:`boolean \| IsURLOptions` `import { IsURLOptions } from 'validator/es/lib/isURL'`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/form/type.ts) | N
validator | Function | - | 自定义校验规则,示例:`{ validator: (val) => val.length > 0, message: '请输入内容'}`。TS 类型:`CustomValidator` `type CustomValidator = (val: ValueType) => CustomValidateResolveType \| Promise<CustomValidateResolveType>` `type CustomValidateResolveType = boolean \| CustomValidateObj` `interface CustomValidateObj { result: boolean; message: string; type?: 'error' \| 'warning' \| 'success' }` `type ValueType = any`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/form/type.ts) | N
whitespace | Boolean | - | 内置校验方法,校验值是否为空格。示例:`{ whitespace: true, message: '值不能为空' }` | N

### FormErrorMessage

名称 | 类型 | 默认值 | 说明 | 必传
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
boolean | String | - | 布尔类型校验不通过时的表单项显示文案,全局配置默认是:`'${name}数据类型必须是布尔类型'` | N
date | String | - | 日期校验规则不通过时的表单项显示文案,全局配置默认是:`'请输入正确的${name}'` | N
Expand All @@ -210,3 +213,4 @@ required | String | - | 没有填写必填项时的表单项显示文案,全
telnumber | String | - | 手机号号码校验不通过时的表单项显示文案,全局配置默认是:`'请输入正确的${name}'` | N
url | String | - | 链接校验规则不通过时的表单项显示文案,全局配置默认是:`'请输入正确的${name}'` | N
validator | String | - | 自定义校验规则校验不通过时的表单项显示文案,全局配置默认是:'${name}不符合要求' | N
whitespace | String | - | 值为空格校验不通过时表单项显示文案,全局配置默认是:`'${name}不能为空` | N
9 changes: 7 additions & 2 deletions src/form/type.ts
Original file line number Diff line number Diff line change
Expand Up @@ -300,7 +300,7 @@ export interface FormRule {
* 校验触发方式
* @default change
*/
trigger?: 'change' | 'blur' | 'submit';
trigger?: ValidateTriggerType;
/**
* 校验未通过时呈现的错误信息类型,有 告警信息提示 和 错误信息提示 等两种
* @default error
Expand Down Expand Up @@ -386,6 +386,11 @@ export interface FormErrorMessage {
* @default ''
*/
validator?: string;
/**
* 值为空格校验不通过时表单项显示文案,全局配置默认是:`'${name}不能为空`
* @default ''
*/
whitespace?: string;
}

export type FormRules<T extends Data> = { [field in keyof T]?: Array<FormRule> };
Expand Down Expand Up @@ -443,7 +448,7 @@ export interface FormValidateParams {
trigger?: ValidateTriggerType;
}

export type ValidateTriggerType = 'blur' | 'change' | 'all';
export type ValidateTriggerType = 'blur' | 'change' | 'submit' | 'all';

export type Data = { [key: string]: any };

Expand Down
Loading