Skip to content

Commit

Permalink
feat(Form): add API to trigger support number key (#3277)
Browse files Browse the repository at this point in the history
* feat(Form): add API to trigger support number key or not

* feat(Form): add API to trigger support number key or not
  • Loading branch information
uyarn authored Dec 10, 2024
1 parent 47dd02b commit f41678a
Show file tree
Hide file tree
Showing 5 changed files with 9 additions and 1 deletion.
1 change: 1 addition & 0 deletions src/form/defaultProps.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ export const formDefaultProps: TdFormProps = {
showErrorMessage: true,
statusIcon: undefined,
submitWithWarningMessage: false,
supportNumberKey: true,
};

export const formItemDefaultProps: TdFormItemProps = {
Expand Down
1 change: 1 addition & 0 deletions src/form/form.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ scrollToFirstError | String | - | options: ''/smooth/auto | N
showErrorMessage | Boolean | true | \- | N
statusIcon | TNode | undefined | Typescript:`boolean \| TNode<TdFormItemProps>`[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
submitWithWarningMessage | Boolean | false | \- | N
supportNumberKey | Boolean | true | support using numbers as form key values or not. Form supports numbers as key values since 1.9.3, set supportNumberKey as false If you still need to retain numbers as array subscripts | N
onReset | Function | | Typescript:`(context: { e?: FormResetEvent }) => void`<br/> | N
onSubmit | Function | | Typescript:`(context: SubmitContext<FormData>) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/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/> | N
onValuesChange | Function | | Typescript:`(changedValues: Record<string, unknown>, allValues: Record<string, unknown>) => void`<br/> | N
Expand Down
1 change: 1 addition & 0 deletions src/form/form.md
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,7 @@ scrollToFirstError | String | - | 表单校验不通过时,是否自动滚动
showErrorMessage | Boolean | true | 校验不通过时,是否显示错误提示信息,统一控制全部表单项。如果希望控制单个表单项,请给 FormItem 设置该属性 | N
statusIcon | TNode | undefined | 校验状态图标,值为 `true` 显示默认图标,默认图标有 成功、失败、警告 等,不同的状态图标不同。`statusIcon` 值为 `false`,不显示图标。`statusIcon` 值类型为渲染函数,则可以自定义右侧状态图标。TS 类型:`boolean \| TNode<TdFormItemProps>`[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
submitWithWarningMessage | Boolean | false | 【讨论中】当校验结果只有告警信息时,是否触发 `submit` 提交事件 | N
supportNumberKey | Boolean | true | 是否支持使用数字作为表单键值,在1.9.3版本后表单组件支持数字作为键值,若仍需要保留数字作为数组下标,请关闭此API或使用 FormList | N
onReset | Function | | TS 类型:`(context: { e?: FormResetEvent }) => void`<br/>表单重置时触发 | N
onSubmit | Function | | TS 类型:`(context: SubmitContext<FormData>) => void`<br/>表单提交时触发。其中 `context.validateResult` 表示校验结果,`context.firstError` 表示校验不通过的第一个规则提醒。`context.validateResult` 值为 `true` 表示校验通过;如果校验不通过,`context.validateResult` 值为校验结果列表。<br />【注意】⚠️ 默认情况,输入框按下 Enter 键会自动触发提交事件,如果希望禁用这个默认行为,可以给输入框添加 enter 事件,并在事件中设置 `e.preventDefault()`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/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/> | N
onValuesChange | Function | | TS 类型:`(changedValues: Record<string, unknown>, allValues: Record<string, unknown>) => void`<br/>字段值更新时触发的回调事件 | N
Expand Down
2 changes: 1 addition & 1 deletion src/form/hooks/useInstance.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,7 @@ export default function useInstance(
if (formItemRef?.current.isFormList) {
fieldValue = calcFieldValue(name, formItemRef?.current.getValue?.());
} else {
fieldValue = calcFieldValue(name, formItemRef?.current.getValue?.(), false);
fieldValue = calcFieldValue(name, formItemRef?.current.getValue?.(), !props.supportNumberKey);
}
merge(fieldsValue, fieldValue);
}
Expand Down
5 changes: 5 additions & 0 deletions src/form/type.ts
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,11 @@ export interface TdFormProps<FormData extends Data = Data> {
* @default false
*/
submitWithWarningMessage?: boolean;
/**
* 是否支持使用数字作为表单键值,在1.9.3版本后表单组件支持数字作为键值,若仍需要保留数字作为数组下标,请关闭此API
* @default true
*/
supportNumberKey?: boolean;
/**
* 表单重置时触发
*/
Expand Down

0 comments on commit f41678a

Please sign in to comment.