解决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后验证失效的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 解决antd的Form组件setFieldsValue的警告问题

    记住:setFieldsValue的字段要对应得上 解决antd的Form组件setFieldsValue的警告 使用antd的Form组件setFieldsValue可能会出现You cannot set a form field before rendering a field associated with the value.警告,字面意义去看是说在 render之前设置了表单值的问题. 解决 在使用setFieldsValue给表单Form的某一个filed赋值时,可能掺杂了非表单控件

  • 解决ant Design中Select设置initialValue时的大坑

    我出现的问题:例如在编辑活动关联红包的时候,需求是select显示的是红包名称,但是表单提交的时候是红包ID:设置默认值的initialValue为Id的时候,会出现显示是id (需要的是显示名称):如果设置默认值initialValue是名称,那么下一步操作会出现报错 但是我还有一种情况:某个活动关联的红包被删除了,在Select中的可供选项中redPackets没有这个红包的时候,显示的会是红包id,而不是红包名称 错误效果图: 期待正确效果图 解决方案:在默认值的后面加上一个空字符串进行转

  • 解决antd 下拉框 input [defaultValue] 的值的问题

    项目中有下拉框跟input需要回显,所以用到defaultValue这个默认值,在后台调接口调到defaultValue这个值给select设置,但是不好使 解决方法 直接用value 先加载选中的条目再加载默认值 初始的时候选中调模是空所以就会加载默认值 这样就解决了 但是在选择下拉的时候 要给scoreFrom值 补充知识:antd Form组件行并列显示 Form表单属性为inline时,表单组件宽度问题 formLayout 不起作用 Form标签 layout属性设置为'inline'

  • 解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题

    场景描述: 如下图所示,点击减免天数会出现一个弹窗, 输入天数后点击确定,保存这个值, 但是我在点第二行的减免天数的时候初始应该是空的, 可是现在显示的是第一行输入的值: <Modal title="减免天数" visible={that.state.visible} onOk={that.handleOk.bind(that)} onCancel={that.handleCancel} > <Form horizontal form={form}> <F

  • 解决antd 表单设置默认值initialValue后验证失效的问题

    方法一: getFieldDecorator没有第三个参数,如果写了3个参数就会出错 错误代码: <Form.Item> { getFieldDecorator('userName', { initialValue: 'Tom' },{ rules: [{ required: true, message: '请输入用户名', }], })( <Input placeholder='请输入用户名'/> ) } </Form.Item> 正确代码: <Form.Ite

  • Django model.py表单设置默认值允许为空的操作

    blank=True 默认值为blank=Flase,表示默认不允许为空, blank=True admin级别可以为空 null=True 默认值为null=Flase,表示默认不允许为空 null=True 数据库级别可以为空 补充知识:Django中models.py字段选项null和blank的区别和使用 1.null 如果null=True,数据库中空值储存为NULL,默认为False. 2.blank 如果blank=True,则允许字段为空.默认为False. 需要注意的是,这不同

  • django-xadmin根据当前登录用户动态设置表单字段默认值方式

    相信你一定会设置一个普通字段的默认值: class Offer(models.Model): salary = models.CharField(max_length=64, blank=True, default='6000', verbose_name='薪资待遇') 相信你还能动态设置外键字段的默认值: class Interview(models.Model): department = models.ForeignKey('departments.Department', relate

  • 解决django中form表单设置action后无法回到原页面的问题

    django中form表单设置action后,点提交按钮是跳转到action页面的,比如设置action为login,网址为192.168.1.128,跳转后便会来到192.168.1.128/login,F5刷新也会是重新提交表单对话框,无法回到原页面. 因此就要在django服务器进行重定向,具体就是 from django.shortcuts import redirect #最后返回原页面 return redirect(url) 补充知识:Django + Ajax发送POST表单,并

  • ThinkPHP提交表单时默认自动转义的解决方法

    本文实例讲述了ThinkPHP提交表单时默认自动转义的解决方法.分享给大家供大家参考.具体方法如下: 一.问题: 在ThinkPHP中提交表单插入数据的时候,单引号和双引号是会被自动转义的,就是会自动的加上反斜线,但是我不想给单引号和双引号加上反斜线. 在ThinkPHP中提交表单插入数据的时候,单引号和双引号是会被自动转义的,就是会自动的加上反斜线,但是我不想给单引号和双引号加上反斜线,在ThinkPHP中提交表单插入数据的时候,单引号和双引号是会被自动转义的,就是会自动的加上反斜线,但是我不

  • jQuery表单设置值的方法

    本文实例为大家分享了jQuery如何表单设置值的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-1.11.3.min.js"></script> <

  • MySQL建表设置默认值/取值范围的操作代码

    MySQL建表设置默认值/取值范围的操作代码

    目录 MySQL建表设置默认值/取值范围 一.设置默认值 二.设置取值范围 MySQL创建表时字符串的默认值 操作: 结论: MySQL建表设置默认值/取值范围 一.设置默认值 设置默认值采用default,如代码所示: 二.设置取值范围 设置取值范围采用check,如代码所示: create table student( id int not null primary key auto_increment, name varchar(32) not null, sex varchar(8) d

  • MySQL表字段设置默认值(图文教程及注意细节)

    MySQL表字段设置默认值(图文教程及注意细节)

    环境 MySQL 5.1 + 命令行工具 问题 MySQL表字段设置默认值 解决 复制代码 代码如下: --SQL: CREATE TABLE test( i_a int NOT NULL DEFAULT 1, ts_b timestamp NOT NULL DEFAULT NOW(), c_c char(2) NOT NULL DEFAULT '1' ); --以下SQL不合法 --time_d time NOT NULL DEFAULT CURTIME(), --date_e date NO

  • react使用antd表单赋值,用于修改弹框的操作

    1.使用getFieldDecorator的initialValue 2.在state里定义一个变量存表格的数据 3.给打开弹框的方法传个record 4.把表格里的值存到state 5.把在state里存的值传给弹框 6.获取传过来的值 7.在取消方法和修改成功后中给赋空值,要不然,点击添加的方法表单里面会有值 7.OK 补充知识:react中使用antd的表单重置数据 resetFields 重置一组输入控件的值(为 initialValue)与状态,如不传入参数,则重置所有组件 Funct

  • 解决php表单重复提交实现方法

    重复提交是我们开发中会常碰到的一个问题,除了我们使用js来防止表单的重复提交,同时还可以使用php来防止重复提交哦. <?php /* * php中如何防止表单的重复提交 */ session_start(); if (empty($_SESSION['ip'])) {//第一次写入操作,判断是否记录了IP地址,以此知道是否要写入数据库 $_SESSION['ip'] = $_SERVER['REMOTE_ADDR']; //第一次写入,为后面刷新或后退的判断做个铺垫 //...........

随机推荐