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

希望form表单提交的时候能够获取到标准化的值(非normalize) #11935

Closed
1 task done
top-soft opened this issue Aug 29, 2018 · 10 comments
Closed
1 task done
Assignees

Comments

@top-soft
Copy link

top-soft commented Aug 29, 2018

  • I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

form 表单提交通过了validateFields的验证,里面获取的values,就是准备往后台传递的结果,但是往往需要对这个些值进一步处理(当然你可以在后台完成),我更喜欢在前台完成,最近有个需求,频率 时间 每天/周/月/年 时间,如果是每天 时间应该是HH:mm:ss,每周应该是字符串一/二...,每月应该是 DD HH:mm:ss等等,显示日期的格式不同可以根据选择频率不同去改变时间的format,但是提交的时候里面的日期类型都是清一色的Moment,这就尴尬了,我还得处理一遍。

What does the proposed API look like?

通过组件上添加一个函数(normalizeSubmit),这个函数在提交的时候调用,准确说在this.props.form.validateFields()执行完成后执行,添加的这个函数(normalizeSubmit)能获取到当前组件的value,并且能获取到this.props.form.validateFields()执行后的values,该函数(normalizeSubmit)返回最终生成的values,就是this.props.form.validateFields((err,values)=>{})中的values。
中文不好,不知道描述明白没有。

@ant-design-bot
Copy link
Contributor

Translation of this issue:


I hope that when the form form is submitted, I can get the standardized value (non-normalize).

  • I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

The form submission is validated by validateFields. The values ​​obtained are the results that are ready to be passed to the background, but it is often necessary to further process these values ​​(of course you can do it in the background), I prefer to finish in the foreground, recently Demand, frequency time per day / week / month / year time, if it is HH:mm:ss per day, the week should be string one / two..., monthly should be DD HH:mm:ss, etc. , the format of the display date can be changed according to the selection frequency, but the date type in the submission is all Moment, which is awkward, I have to deal with it again.

What does the proposed API look like?

By adding a function (normalizeSubmit) on the component, this function is called at the time of commit, which is exactly executed after the execution of this.props.form.validateFields() is completed. The added function (normalizeSubmit) can get the value of the current component. And can get the value of this.props.form.validateFields() after execution, the function (normalizeSubmit) returns the final generated value, which is in this.props.form.validateFields((err,values)=>{}) Values.
Chinese is not good, I don't know if the description is clear.

@qiqiboy
Copy link
Contributor

qiqiboy commented Aug 29, 2018

You may need react-antd-formutil

@afc163
Copy link
Member

afc163 commented Aug 30, 2018

建议自行在 validateFields 中处理数据后再提交到后台。

@afc163 afc163 closed this as completed Aug 30, 2018
@hengkx
Copy link
Member

hengkx commented Aug 30, 2018

如果我的表单是动态生成的,里面有各种不同的组件如DatePicker,Upload, 在validateFields做处理时还需要去判断每个组件的类型,如果有个 方法 可以直接获处理返回的值岂不是 更方便一些

@hengkx
Copy link
Member

hengkx commented Aug 30, 2018

<FormItem label={item.label} key={item.id}>
            {getFieldDecorator(item.fieldName, {
              rules: [{ required: item.isRequired }],
              ...others,
            })(getControl(item))}
 </FormItem>

类似这样的,在validateFields 还需要多做一步操作

@hengkx
Copy link
Member

hengkx commented Aug 30, 2018

现在是这样处理的

this.props.form.validateFields(async (err, values) => {
      if (!err) {
        const record = {};
        Object.keys(values).forEach(key => {
          const field = find(model.modelForm, { fieldName: key });
          if (values[key]) {
            if (field.type === 'DATEPICKER') {
              record[key] = values[key].format('YYYY-MM-DD HH:mm:ss');
            } else if (field.type === 'UPLOAD' || field.type === 'IMAGE') {
              record[key] = values[key].map(item => item.response.url);
            } else {
              record[key] = values[key];
            }
          }
        });
      }
});

@papibabi
Copy link

同感,就只想要一个正常的值,别搞这么多花里胡哨的东西。

@happy-little-one
Copy link

我认为这是很重要的功能。
比如日期组件,前后台是字符串交互的。
金额组件,前后台是用分做单位的,但用户输入的是元。
级联选择只需要取最后一个值就可以了。。。
如果可以有地方可以做进和出转换,就可以把这些封装起来,否则就要每个地方做手动转换。

1 similar comment
@happy-little-one
Copy link

我认为这是很重要的功能。
比如日期组件,前后台是字符串交互的。
金额组件,前后台是用分做单位的,但用户输入的是元。
级联选择只需要取最后一个值就可以了。。。
如果可以有地方可以做进和出转换,就可以把这些封装起来,否则就要每个地方做手动转换。

@dazer007
Copy link

@hengkx 这个方法哪里来的呢,**find(model.modelForm, { fieldName: key });**,根据fieldName获取form表单对象.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

9 participants