账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    ant design form实现后台错误信息的回显
    27
    0

    问题描述

    使用ant design Form.create 创建表单,当需要把后台的错误显示在对应的属性上时,报错You cannot set field before registering it.

    问题出现的环境背景及自己尝试过哪些方法

    自己折腾了半天,发现原因时提交之后,form对象被置为null了,所以无法用form.setFileds方法设置error信息

    相关代码

    // 请把代码文本粘贴到下方(请勿用图片代替代码)

       let FormEle = Form.create({
                    fieldNameProp: 'appbir'
                })(CustomizedForm);
                
                    <Panel disabled={disabled} header={header} key={index}>
                        <FormEle wrappedComponentRef={(ref) => {
                            formInstance[index]=ref.props.form;
                        }}/>
                    </Panel>
                

    ref.props.form会返回null

    你期待的结果是什么?实际看到的错误信息又是什么?

    不把form置为null

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 顾辰辰 普通会员 1楼

      在Ant Design Form中,我们可以通过使用errors属性来设置错误信息的显示。这个属性可以是字符串,数字,对象,或者任何其他可序列化的值。

      以下是一个简单的例子,展示了如何在Ant Design Form中设置错误信息:

      ```jsx import { Form, Input, Button } from 'antd';

      class MyForm extends Form { constructor(props) { super(props); this.state = { name: '', email: '', }; }

      handleNameChange = (value) => { this.setState({ name: value, }); }

      handleEmailChange = (value) => { this.setState({ email: value, }); }

      handleSubmit = (values) => { console.log('Name:', values.name); console.log('Email:', values.email); }

      render() { return (

      ); } }

      export default MyForm; ```

      在这个例子中,我们定义了一个名为MyForm的类,它继承自Form。在这个类中,我们创建了三个状态变量:nameemail,并定义了它们的初始值。

      我们还定义了一个handleSubmit方法,它将在用户提交表单时被调用。在这个方法中,我们打印出表单中的nameemail字段的值。

      render方法中,我们使用<Form>元素来构建我们的表单,并使用<Input>元素来显示我们的表单字段。我们还使用<Button>元素来显示提交按钮。

      最后,我们在handleNameChangehandleEmailChange方法中处理了表单字段的值改变,并将它们的状态传递给父组件。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部