Skip to content

Commit 23a992a

Browse files
Jay2138Jay2138
authored
feat: Update the form component code (#3917)
* feat: 新增表单组件 * feat(form): 添加表单组件及示例，优化数据处理和安全检查 * feat(form): 完善表单组件样式，添加禁用和只读状态支持，更新文档示例 * fix: 修复嵌套三元表达式的 ESLint 错误 * feat(form): 更新表单组件，添加对 dayjs 的依赖，优化类型定义，调整示例样式 * feat(test): 添加表单组件的单元测试，覆盖 props 和方法的各个场景 * fix(common): 优化类型定义，移除不必要的 Node 类型支持 * fix(form): 移除不必要的注释，优化表单组件示例样式 * feat(form): 移除表单组件示例样式测试文件 * fix(pull-down-list): 优化点击事件处理，简化数据传递方式 * fix(form): 更新必填符号和错误提示信息的默认值，优化文档说明 * fix(form): 使用配置文件中的前缀更新表单和表单项组件的名称 * fix(form): 优化表单组件的单元测试，增加对元素存在性的验证，移除旧的快照文件 * fix(form): 移除表单组件的测试文件和快照，清理不再使用的代码 * fix(form): 优化表单组件的代码结构，简化事件处理逻辑，更新样式和占位符文本 * feat(form): 增加表单组件的禁用、只读、错误信息配置及相关文档说明，优化字段校验和提交事件处理
1 parent 8d4583d commit 23a992a

File tree

20 files changed

+304
-86
lines changed

20 files changed

+304
-86
lines changed

‎packages/components/form-item/README.en-US.md‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,12 @@ name | type | default | description | required
99
style | Object | - | CSS(Cascading Style Sheets) | N
1010
custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N
1111
arrow | Boolean | false | \- | N
12-
help | String | - | \- | N
13-
label | String | '' | \- | N
12+
for | String | - | \- | N
13+
help | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/common/common.ts) | N
14+
label | String / Slot | '' | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/common/common.ts) | N
1415
label-align | String | - | options: left/right/top | N
1516
label-width | String / Number | - | \- | N
1617
name | String | - | \- | N
17-
required-mark | Boolean | true | Whether to display the required symbol (*), which has a higher priority than Form.requiredMark | N
18-
show-error-message | Boolean | true | When the validation fails, whether to display the error message, which has a higher priority than `Form.showErrorMessage` | N
18+
required-mark | Boolean | undefined | \- | N
19+
rules | Array | - | Typescript：`Array<FormRule>` | N
20+
show-error-message | Boolean | undefined | \- | N

‎packages/components/form-item/README.md‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,12 @@
99
style | Object | - | 样式 | N
1010
custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N
1111
arrow | Boolean | false | 是否显示右侧箭头 | N
12-
help | String | - | 表单项说明内容 | N
13-
label | String | '' | 字段标签名称 | N
12+
for | String | - | 【开发中】 | N
13+
help | String / Slot | - | 【开发中】 | N
14+
label | String / Slot | '' | 字段标签名称。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/common/common.ts) | N
1415
label-align | String | - | 表单字段标签对齐方式：左对齐、右对齐、顶部对齐。默认使用 Form 的对齐方式，优先级高于 Form.labelAlign。可选项：left/right/top | N
1516
label-width | String / Number | - | 可以整体设置标签宽度，优先级高于 Form.labelWidth | N
1617
name | String | - | 表单字段名称 | N
17-
required-mark | Boolean | true | 是否显示必填符号（*），优先级高于 Form.requiredMark | N
18-
show-error-message | Boolean | true | 校验不通过时，是否显示错误提示信息，优先级高于 `Form.showErrorMessage` | N
18+
required-mark | Boolean | undefined | 是否显示必填符号（*），优先级高于 Form.requiredMark | N
19+
rules | Array | - | 【开发中】 | N
20+
show-error-message | Boolean | undefined | 校验不通过时，是否显示错误提示信息，优先级高于 `Form.showErrorMessage` | N

‎packages/components/form-item/form-item.less‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,8 @@
4545
align-items: center;
4646
width: @form-item-label-width;
4747
margin-right: 16rpx;
48-
font-size: @font-size-base;
48+
font-size: @font-size-m;
49+
4950
color: @text-color-primary;
5051
line-height: 1.5;
5152

@@ -101,7 +102,8 @@
101102

102103
&__help {
103104
// margin: 4rpx 0 8rpx;
104-
font-size: @font-size-base;
105+
font-size: @font-size-m;
106+
105107
color: @font-gray-1;
106108
line-height: 1.4;
107109
}

‎packages/components/form-item/form-item.ts‎

Lines changed: 22 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,27 @@
11
import props from './props';
22
import { validate, ValidateStatus } from './form-model';
33
import config from '../common/config';
4+
import { SuperComponent, wxComponent, RelationsOptions } from '../common/src/index';
5+
46

57
const { prefix } = config;
68
const name = `${prefix}-form-item`;
79

8-
Component({
9-
externalClasses: [
10+
@wxComponent()
11+
export default class FormItem extends SuperComponent {
12+
externalClasses = [
13+
1014
`${prefix}-class`,
1115
`${prefix}-class-label`,
1216
`${prefix}-class-controls`,
1317
`${prefix}-class-help`,
1418
`${prefix}-class-extra`,
15-
],
19+
];
1620

17-
properties: props as any,
21+
properties = props as any;
22+
23+
data = {
1824

19-
data: {
2025
prefix,
2126
classPrefix: name,
2227
errorList: [],
@@ -28,9 +33,10 @@ Component({
2833
form: {},
2934
colon: false,
3035
showErrorMessage: true,
31-
},
36+
};
37+
38+
relations: RelationsOptions = {
3239

33-
relations: {
3440
'../form/form': {
3541
type: 'parent',
3642
linked(target) {
@@ -69,9 +75,10 @@ Component({
6975
}
7076
},
7177
},
72-
},
78+
};
79+
80+
lifetimes = {
7381

74-
lifetimes: {
7582
ready() {
7683
this.initFormItem();
7784
},
@@ -80,9 +87,10 @@ Component({
8087
this.form.unregisterChild(this.properties.name);
8188
}
8289
},
83-
},
90+
};
91+
92+
methods = {
8493

85-
methods: {
8694
// 处理描述信息链接点击事件
8795
handlePreviewImage(e) {
8896
const { url } = e.currentTarget.dataset;
@@ -262,5 +270,6 @@ Component({
262270
// 触发blur验证
263271
this.validate('blur');
264272
},
265-
},
266-
});
273+
};
274+
}
275+

‎packages/components/form-item/props.ts‎

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,15 @@ const props: TdFormItemProps = {
1111
type: Boolean,
1212
value: false,
1313
},
14+
/** label 原生属性 */
15+
for: {
16+
type: String,
17+
value: '',
18+
},
1419
/** 表单项说明内容 */
1520
help: {
1621
type: String,
17-
value: '',
22+
1823
},
1924
/** 字段标签名称 */
2025
label: {
@@ -36,13 +41,18 @@ const props: TdFormItemProps = {
3641
},
3742
/** 是否显示必填符号（*），优先级高于 Form.requiredMark */
3843
requiredMark: {
39-
type: Boolean,
40-
value: true,
44+
type: null,
45+
value: undefined,
46+
},
47+
/** 表单字段校验规则 */
48+
rules: {
49+
type: Array,
4150
},
4251
/** 校验不通过时，是否显示错误提示信息，优先级高于 `Form.showErrorMessage` */
4352
showErrorMessage: {
44-
type: Boolean,
45-
value: true,
53+
type: null,
54+
value: undefined,
55+
4656
},
4757
};
4858

‎packages/components/form-item/type.ts‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,16 @@ export interface TdFormItemProps {
1414
value?: boolean;
1515
};
1616
/**
17-
* 表单项说明内容
17+
* label 原生属性
1818
* @default ''
19+
*/
20+
for?: {
21+
type: StringConstructor;
22+
value?: string;
23+
};
24+
/**
25+
* 表单项说明内容
26+
1927
*/
2028
help?: {
2129
type: StringConstructor;
@@ -53,15 +61,21 @@ export interface TdFormItemProps {
5361
};
5462
/**
5563
* 是否显示必填符号（*），优先级高于 Form.requiredMark
56-
* @default true
5764
*/
5865
requiredMark?: {
5966
type: BooleanConstructor;
6067
value?: boolean;
6168
};
69+
/**
70+
* 表单字段校验规则
71+
*/
72+
rules?: {
73+
type: ArrayConstructor;
74+
value?: Array<any>;
75+
};
6276
/**
6377
* 校验不通过时，是否显示错误提示信息，优先级高于 `Form.showErrorMessage`
64-
* @default true
78+
6579
*/
6680
showErrorMessage?: {
6781
type: BooleanConstructor;

‎packages/components/form/README.en-US.md‎

Lines changed: 34 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -10,20 +10,38 @@ style | Object | - | CSS(Cascading Style Sheets) | N
1010
custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N
1111
colon | Boolean | false | \- | N
1212
data | Object | {} | Typescript：`FormData` | N
13+
disabled | Boolean | undefined | \- | N
14+
error-message | Object | - | Typescript：`FormErrorMessage` | N
1315
label-align | String | right | options: left/right/top | N
1416
label-width | String / Number | '81px' | \- | N
15-
required-mark | Boolean | true | Whether to display the required symbol (*), which is displayed by default | N
17+
readonly | Boolean | undefined | \- | N
18+
required-mark | Boolean | undefined | \- | N
1619
required-mark-position | String | - | Display position of required symbols。options: left/right | N
1720
reset-type | String | empty | options: empty/initial | N
18-
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/tree/develop/packages/components/form/type.ts) | N
21+
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
22+
scroll-to-first-error | String | - | options: ''/smooth/auto | N
1923
show-error-message | Boolean | true | \- | N
24+
submit-with-warning-message | Boolean | false | \- | N
25+
2026

2127
### Form Events
2228

2329
name | params | description
2430
-- | -- | --
2531
reset | `(detail: { e?: FormResetEvent })` | \-
26-
submit | `(context: SubmitContext<FormData>)` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/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/>
32+
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/>
33+
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/>
34+
35+
### FormInstanceFunctions 组件实例方法
36+
37+
name | params | return | description
38+
-- | -- | -- | --
39+
clear-validate | `(fields?: Array<keyof FormData>)` | \- | required
40+
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/>
41+
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/>
42+
submit | `(params?: { showErrorMessage?: boolean })` | \- | required
43+
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/>
44+
2745

2846

2947
### FormItem Props
@@ -33,21 +51,26 @@ name | type | default | description | required
3351
style | Object | - | CSS(Cascading Style Sheets) | N
3452
custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N
3553
arrow | Boolean | false | \- | N
36-
help | String | - | \- | N
37-
label | String | '' | \- | N
54+
for | String | - | \- | N
55+
help | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/common/common.ts) | N
56+
label | String / Slot | '' | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/common/common.ts) | N
57+
3858
label-align | String | - | options: left/right/top | N
3959
label-width | String / Number | - | \- | N
4060
name | String | - | \- | N
4161
required-mark | Boolean | undefined | \- | N
62+
rules | Array | - | Typescript：`Array<FormRule>` | N
63+
4264
show-error-message | Boolean | undefined | \- | N
4365

4466
### FormRule
4567

4668
name | type | default | description | required
4769
-- | -- | -- | -- | --
4870
boolean | Boolean | - | \- | N
49-
date | Boolean / Object | - | Typescript：`boolean \| IsDateOptions` `interface IsDateOptions { format: string; strictMode: boolean; delimiters: string[] }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/components/form/type.ts) | N
50-
email | Boolean / Object | - | Typescript：`boolean \| IsEmailOptions` `import { IsEmailOptions } from 'validator/es/lib/isEmail'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/components/form/type.ts) | 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+
5174
enum | Array | - | Typescript：`Array<string>` | N
5275
idcard | Boolean | - | \- | N
5376
len | Number / Boolean | - | \- | N
@@ -58,9 +81,11 @@ number | Boolean | - | \- | N
5881
pattern | String / Object | - | Typescript：`RegExp \| string` | N
5982
required | Boolean | - | \- | N
6083
telnumber | Boolean | - | \- | N
84+
trigger | String | change | Typescript：`ValidateTriggerType` | N
6185
type | String | error | options: error/warning | N
62-
url | Boolean / Object | - | Typescript：`boolean \| IsURLOptions` `import { IsURLOptions } from 'validator/es/lib/isURL'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/components/form/type.ts) | N
63-
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-miniprogram/tree/develop/packages/components/form/type.ts) | N
86+
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
87+
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-miniprogram/blob/develop/packages/components/form/type.ts) | N
88+
6489
whitespace | Boolean | - | \- | N
6590

6691
### FormErrorMessage

0 commit comments

Comments
 (0)