解决antd 表单设置默认值initialValue后验证失效的问题
更新时间：2020年11月02日 11:04:24 作者：�见贤思齐
这篇文章主要介绍了解决antd 表单设置默认值initialValue后验证失效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
方法一：
getFieldDecorator没有第三个参数，如果写了3个参数就会出错
错误代码：
<Form.Item>
{
getFieldDecorator('userName', { initialValue: 'Tom' },{
rules: [{
required: true, message: '请输入用户名',
}],
})(
<Input placeholder='请输入用户名'/>
)
}
</Form.Item>
正确代码：
<Form.Item>
{
getFieldDecorator('userName',{
initialValue:'Tom',
rules:[
{required: true,message:'请输入用户名'}
]
})(
<Input placeholder='请输入用户名'/>
)
}
</Form.Item>
方法二：通过setFieldsValue来设置默认值可以解决
this.props.form.setFieldsValue({
inputValue1:this.state.inputValue1,
inputValue2:this.state.inputValue2,
inputValue3:this.state.inputValue3,
});
如果还不能解决，查看是否在表单提交函数里写了验证代码
handleSubmit = (e) => {
e.preventDefault();
this.props.form.validateFields((err) => {
if (err) {
console.log('表单验证失败');
}else{
this.handleOk();//这里是表单验证成功执行的函数
}
});
};
补充知识：antd自定义组件初始值没有返回或者设置initialValue，form.validateFields不会执行验证
在自定义组件中加个componentDidMount返回初始值就可以啦
componentDidMount() {
const { onChange } = this.props;
onChange({
...this.state,
});
}
以上这篇解决antd 表单设置默认值initialValue后验证失效的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要给大家介绍了关于Vue组件传参11种方式的相关资料,文中通过代码示例介绍的非常详细,对大家学习或者使用vue具有一定的参考借鉴价值,需要的朋友可以参考下2023-09-09
如果你也和我一样，按照正常的流程下载并且配置了stylus，但是依旧报错，也许这篇文章就是你的菜，一起来看看吧2022-08-08
这篇文章主要介绍了vue实现鼠标移入移出事件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
这篇文章主要为大家介绍了Vue.js3.2的vnode部分优化升级使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要介绍了vue中关于click.stop的用法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
当你跑起一个项目的时候,第一步需要先安装依赖npm install,下面这篇文章主要给大家介绍了关于vue踩坑之npm install报错问题解决的相关资料,需要的朋友可以参考下2022-06-06
这篇文章主要介绍了如何在 Vue 表单中处理图片，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下2021-01-01
在日常使用Vue开发项目的时候，计算属性computed是一个非常常用的特性，本文就来分享一些使用Vue的computed计算属性时的一些小技巧，希望能够帮助到大家2023-06-06
本篇文章主要介绍了vue中的provide/inject的学习使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
这篇文章主要介绍了vue使用assign巧妙重置data数据方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
最新评论