Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Getting a error when defining FormBuilder.defineWidget in my component when a custom component is being rendered...The error is "Widget is already defined" #77

Open
krinashah0493 opened this issue Mar 18, 2021 · 3 comments

Comments

@krinashah0493
Copy link

No description provided.

@krinashah0493
Copy link
Author

Here is a code snippet of what i am trying to implement

import React from 'react';
import "antd/dist/antd.css";
import { Form,Select,Upload, message, Button, Icon, } from 'antd'
import FormBuilder from 'antd-form-builder'
import MultipleSelect2 from './multipleInput';
// import MultipleSelect from './multipleInput';
const {Option}=Select

function FormBuild(props){
let formRef = React.createRef()
const [form] = Form.useForm()
const forceUpdate = FormBuilder.useForceUpdate();

const data=props.data
const meta = {
  fields: data
}

const imageProps = {
  name: 'file',
  action: '//jsonplaceholder.typicode.com/posts/',
  headers: {
    authorization: 'authorization-text',
  },
  onChange(info) {
    if (info.file.status !== 'uploading') {
      console.log(info.file, info.fileList);
    }
    if (info.file.status === 'done') {
      message.success(`${info.file.name} file uploaded successfully`);
    } else if (info.file.status === 'error') {
      message.error(`${info.file.name} file upload failed.`);
    }
  },
};

const formStyle={
  marginTop:"20px",
  marginLeft:"-30px"
}

const handleFinish = evt => {
  const resp=formRef.current.getFieldsValue()
  props.onFinish(resp)
  // form.resetFields()
}
FormBuilder.defineWidget("multipleSelect",MultipleSelect2)

return (
  <Form form={form} style={formStyle} onFinish={handleFinish}>
    <FormBuilder meta={meta} form={form} />
    <Form.Item name="header" label="Header">
      {/* <MultipleSelect2 /> */}
    </Form.Item>
    <Form.Item wrapperCol={{ span: 8, offset: 8 }} >
      <Button type="primary" onClick={(e)=>{handleFinish()}} disabled={props.disable?props.disable:false}>Submit</Button>
      <Button type="primary" onClick={(e)=>{handleFinish()}} disabled={props.disable?false:true}>Add More Images/Data</Button>
    </Form.Item>  
   
  </Form>
)

}

export default FormBuild

@mohaphez
Copy link

mohaphez commented Jan 5, 2022

i have same issue

has any solution ?

@berakoc
Copy link

berakoc commented Dec 27, 2022

The issue here is sometimes the line of code is run twice. So to solve the problem either convert it to singleton or far better use the widget itself in the meta field instead of defining it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants