Documentation improvement - Form.Item messageVariables

[Smoovsky]

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

What problem does this feature solve?

To make the documentation less confusing

What does the proposed API look like?

The current doc states here :

<Form>
  <Form.Item messageVariables={{ another: 'good' }} label="user">
    <Input />
  </Form.Item>
  <Form.Item messageVariables={{ label: 'good' }} label={<span>user</span>}>
    <Input />
  </Form.Item>
</Form>

Something like:

<Form>
  <Form.Item messageVariables={{ another: 'good' }} label="user" rules={[{required: true, message: '${another} is required'}]}>
    <Input />
  </Form.Item>
  <Form.Item messageVariables={{ label: 'good' }} label={<span>user</span>} rules={[{required: true, message: '${label} is required'}]}>
    <Input />
  </Form.Item>
</Form>

would make more sense

[github-actions]

Hello @Smoovsky. We totally like your proposal/feedback, welcome to send us a Pull Request for it. Please send your Pull Request to proper branch (feature branch for the new feature, master for bugfix and other changes), fill the Pull Request Template here, provide changelog/TypeScript/documentation/test cases if needed and make sure CI passed, we will review it soon. We appreciate your effort in advance and looking forward to your contribution!

你好 @Smoovsky，我们完全同意你的提议/反馈，欢迎直接在此仓库 创建一个 Pull Request 来解决这个问题。请将 Pull Request 发到正确的分支（新特性发到 feature 分支，其他发到 master 分支），务必填写 Pull Request 内的预设模板，提供改动所需相应的 changelog、TypeScript 定义、测试用例、文档等，并确保 CI 通过，我们会尽快进行 Review，提前感谢和期待您的贡献。

[DaoxingHuang]

@afc163 这个messageVariables 我没有get他的使用点,我自己也没有使用过 ，我简单的看了下源码，更觉得他是修改原message的模板变量，一旦你自定义的message，刚会失效；
例如： <Form> <Form.Item name="userName" messageVariables={{ name: 'good' }} label="user" rules={[{required: true ,}]}> <Input /> </Form.Item> <Form.Item name="password" messageVariables={{ label: 'good' }} label={<span>user</span>} rules={[{required: true, message: '${label} is required'}]}> <Input /> </Form.Item> <Form.Item > <Button type="primary" htmlType="submit"> Submit </Button> </Form.Item> </Form>
上面userName事例中，因为 rules中 required 没有设置message ,则使用默认的模板 '${name} is required' ,其中的模块 name 会被 item的属性 name 替换，则整个提示消息就是 userName is required, 又因为这里我设置messageVariables={{ name: 'good' }} ，即模板里面的 name, 刚 userName 会被 messageVariables替换，错误信息即变为 good is required; 不知道 这样理解对不对；

当然 如果你自定义了 validateMessages ，效果也是一样的 ，例如这位同学的例子：
<Form validateMessages= { { required: "'${another}' 是必选字段", }}> <Form.Item name="userName" messageVariables={{ another: 'good' }} label="user" rules={[{required: true }]}> <Input /> </Form.Item> <Form.Item name="password" messageVariables={{ label: 'good' }} label={<span>user</span>} rules={[{required: true, message: '${label} is required'}]}> <Input /> </Form.Item> <Form.Item > <Button type="primary" htmlType="submit"> Submit </Button> </Form.Item> </Form>

因为这里的模板改成了 another ，所以 自定义messageVariables变量名也要改成another，提示的信息就是 good is required。

[DaoxingHuang]

[729993031]

这个是因为有些Form.Item是没有label的 但是做表单校验的时候需要使用label 通过这个属性我就可以免去自己写校验的麻烦了

[DaoxingHuang]

@729993031 可否提供一些比较详细的使用场景

[DaoxingHuang]

[DaoxingHuang]

以上我是我个人认为 可用的场景

[729993031]

[729993031]

因为很多情况下产品要求是不能展示label这个属性给用户的，而antd需要使用到这个属性作为校验的提示， 通过传入messageVariables 可以避免我自己去写校验提示

[DaoxingHuang]

我看了你的例子，我想我跟你的理解是 一致的 ，即这个messageVariables 主要用于校验信息的验证；比如使用已经默认 name 或是重写vilidatemessage 重新设置验证模板

[DaoxingHuang]

@729993031

[729993031]

嗯 是的 @DaoxingHuang

[DaoxingHuang]

@729993031 有个问题，你的第一个国家能取到label的信息？ 逻辑上 rule中存在message会被覆盖

[729993031]

我把label传到了messageVariables 里面去了 因为这里的国家是不允许显示label给用户的 我只是传递给rule做校验用

[729993031]

我到现在才知道message是支持 "'${name}' 是必选字段" 这个语法的 我之前一直以为他只支持静态的语法， 我觉得这个可以通过在文档中注明或者引导一下用户

[DaoxingHuang]

我到现在才知道message是支持 "'${name}' 是必选字段" 这个语法的 我之前一直以为他只支持静态的语法， 我觉得这个可以通过在文档中注明或者引导一下用户

对的，支持 ，本质 就是代换内部的defaultValidateMessages 模板，不仅仅name,所以 默认message 中的模板值都可以替换
默认的英语模板

但现在对你这个例子的问题是 如果 rules 里设置了 message ，其实 messageVariables里面的变量是不生效的 ，所以你的例子里的那个"�国家" 是有message的，所以按现在的逻辑应该验证信息应该显示的是：”请选择‘${label}’“，而不是你例子里显示的 "请选择国家"，所以麻烦你再辛苦确认下。你可以仔细看下我贴的代码。

或是托管下代码 ，我看下

[729993031]

@DaoxingHuang https://codesandbox.io/s/cool-sea-f5xpg?file=/src/index.js

意思是说这个 请选择国家 这个提示语是错误的？

[DaoxingHuang]

@DaoxingHuang https://codesandbox.io/s/cool-sea-f5xpg?file=/src/index.js

意思是说这个 请选择国家 这个提示语是错误的？

好的 多谢。我看 下，主要是版本问题，我的是 4.16.13 ，这个版本是不正常的 ，最新的4.17.0-alpha.3是OK的

[DaoxingHuang]

你可以通过 messageVariables 修改 Form.Item 的验证信息，除了用户自定义 rule message 外，也可参考 validateMessages 修改默认的配置信息。

<Form>
  <Form.Item messageVariables={{ myVar: 'Cumstom Msg' }} name='userName' label="User Name" rules={[{required: true, message: '${myVar} is required'}]}>
    <Input />
  </Form.Item>
  <Form.Item messageVariables={{ label: 'Name' }} name='userName' label="User Name" rules={[{required: true, message: '${label} is required'}]}>
    <Input />
  </Form.Item>
  <Form.Item name='userName' label="User Name" rules={[{required: true, message: '${label} is required'}]}>
    <Input />
  </Form.Item>
  <Form.Item name='userName' rules={[{required: true, message: '${label} is required'}]}>
    <Input />
  </Form.Item>
  <Form.Item name='nickName' label={<span>Nickname</span>} rules={[{required: true, message: '${label} is required'}]}>
    <Input />
  </Form.Item>
  <Form.Item name='nickName' label={'Nickname'} rules={[{required: true, message: '${label} is required'}]}>
    <Input />
  </Form.Item>
  <Form.Item>
    <Button type="primary" htmlType="submit">
      Submit
    </Button>
  </Form.Item>
</Form>

注意: 请谨慎使用错误提示信息中模板占位符字符串作为 变量名 如上面例子中的 ${label}, 默认情况下优先使用 messageVariables 定义的 label，如果不存在则使用 Form Item 属性 label(label是字符串,如不是，则跳过，如 label={<span>Nickname</span>}),如果属性label也不存在，则使用 Form Item 属性 name ,

如果设置了 Config-Provider 的 locale, 默认的错误提示信息 会使用 locale 下�定义的 defaultValidateMessages，之所以提出这个问题，是因为当前版本两者提供的模板字符串占位符名称不一致，会影响 messageVariables 的默认行为。

@afc163 这个文案真的不好写，感觉非常BUG。如果使用 模板字符串中定义的变量如 label ,name ，各种让人困惑，虽然文案可以说明.而且 antd 自己定义的 defaultValidateMessages 与 field-form定义占位符的又不一样，情况就更复杂，没有搞清楚逻辑的 ，估计会一头雾水，我上面的例子你可以看下，这个还不包括自定义 validateMessages 和 通过设置ConfigProvider locale={'en-US'} 来说明的。

[DaoxingHuang]

如果想常规用的要么就改实现方式，要么就提示用户 哪些不能用作变量名

[DaoxingHuang]

4.16.13 之前的版本还好一点，当然也有一点BUG，4.17 这个我就不知道咋解释了

[guan404ming]

I would try to summarize the result and put them in the doc !