react-component / react-component/field-form
validator校验无法输出'${example}'
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 1k
- Forks
- 286
- Avg merge
- 4d 16h
- Merged PRs (30d)
- 1
Description
问题:在使用antd的Form.Item组件遇到,输入校验错误会输出undefined,问题代码如下:
<Form.Item
name={'demo'}
label={'demo'}
rules={[
{
validator: (rule, value) => {
if (!value) {
return Promise.reject('${example}');
}
return Promise.resolve();
},
},
]}
问题原因:查阅了代码发现validateUtil.ts这个文件的replaceMessage函数对'${}'字符串做了特殊处理,但是TS校验没有暴露出来这个处理。
解决:修改代码为如下,可以解决问题
<Form.Item
name={'demo'}
label={'demo'}
rules={[
{
validator: (rule, value) => {
if (!value) {
return Promise.reject('${example}');
}
return Promise.resolve();
},
example: '${example}',
},
]}
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reading validateUtil.ts, especially replaceMessage, and trace how validator rejection messages are processed and typed. Confirm the intended handling of '${example}' without relying on the workaround rule property, then verify the validator message behavior with the repository's existing validation checks.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100