I'm trying to create a form inside modal using react class component and antd, but i couldn't find a way to get the data submited in the form. i tried to console the event of the onOk in antd modal but i same no data.
i also found an example but it was with function component and hooks Form.useForm()
here is the simple if anyone can help : Simple
any hint will be helpful thanks.
The solution is to hide the footer of the modal and add submit for the form exemple :
<Modal
title={this.props.formTitle}
visible={this.state.modalVisible}
confirmLoading={this.state.confirmLoading}
onCancel={this.handleCancel}
footer={[]}//this to hide the default inputs of the modal
>
<Form
layout="vertical"
name="form_in_modal"
initialValues={{
modifier: 'public',
}}
onFinish={this.handleOk}>
<Form.Item
name="title"
label="Title"
rules={[
{
required: true,
message: 'Please input the title of collection!',
},
]}>
<Input />
</Form.Item>
<Form.Item name="description" label="Description">
<Input type="textarea" />
</Form.Item>
<Form.Item name="modifier" className="collection-create-form_last-form-item">
<Radio.Group>
<Radio value="public">Public</Radio>
<Radio value="private">Private</Radio>
</Radio.Group>
//this is the submit of the form
<Button key="submit" type="primary" loading={this.state.confirmLoading} htmlType="submit">
submit
</Button>
</Form.Item>
</Form>
</Modal>
I tried this out myself with limited TS(JS) knowledge using Antd & React framework.
The steps are as follow.
construct an object e.g:
let obj1 = {
variableA : "",
variableB : ""
}
In your form body get the value using
<Form.Item ... onChange={(event)=>obj1.variableA=event.target.value}/>
In this case, the event keyword will return the final input value to instances (e.g variableA) within obj1 with given input from different form, which you can operate on after the form submission finish in a quasi-java style.
You can test it by creating alert(obj1.variableA) or console.log function to see if that's the desired value, in my case it works well with string and numeric input.
As I am not doing front end, so I might make mistakes and do feel free to point it out.
Related
As a part I'm working on, I need to take the data from a form when the user presses enter and use that data in a Modal. But the data doesn't seem to get extracted from the form. Here is my code :
const showModal = (info: any) => {
if(info.keyCode===13){
setIsModalOpen(true);
setData(info.form.note); // Some issue in this line
}
};
<SearchResults openModal={isModalOpen} message={data}/>
<Form name="control-ref" onKeyUp={showModal}>
<Form.Item name="note" id="note" rules={[{ required: true }]}>
<InputField
variant="search"
placeholder="Search"
addonAfter={selectAfter}
className="search-field"
/>
</Form.Item>
</Form>
I just need to find how to access form data. Please help
Hello this is my code:
<Form
layout='horizontal'
size='small'
onFinish={this.handleSubmit.bind(this)}
>
<Form.Item
label={`Organization:`}
name={`Organization`}
>
<Input
onChange={
(e) => this.handleOrgInput(e)
}
/>
</Form.Item>
<Button
icon={
this.state.showMenu ?
<CaretDownOutlined />
:
<CaretRightFilled />
}
shape="circle"
onClick={() => {
{
this.handleFetchSystemData()
}
disabled={this.state.showMenu}
style={{marginLeft: 5}}
/>
{this.state.showMenu && this.state.myName!==undefined ?
<div>
{console.log('Name :', this.state.myName}
<Form.Item
name={"Name"}
label={`Name:`}
initialValue={this.state.myName}
>
<Input
// defaultValue={this.state.myName}
/>
</Form.Item>
<Form.Item
name={"lastName"}
label={`LastName:`}
initialValue={this.state.myLastName}
>
<Input
// defaultValue={this.state.myLastName}
/>
</Form.Item>
<Form.Item>
<Button
type="primary"
htmlType="submit"
size="middle"
>
Submit
</Button>
</Form.Item>
</div>
:
undefined
</Form>
When i am pressing the button i call my server to fetch the data. But when i change the input and then clicking again the button the values on the Form.Item are remain the same, but my state has change. I can see that my state changes because i console.log it.
When i comment the initialValue attribute on Form.Item and using defaultValue attribute on Input component my values are changing smoothly, but when i press sumbit the values are not senting from the Form. This is a problem for me
I have seen a lot about this situation, but most of it regards functional components and not class components. Also i have seen that with class components some people using refs but Form component has not attribute ref. I have seen this regarding class components but did not help me. In the end the antd documentation regards i think functional components and not class, so i am a comfused.
I was trying validation of input field with hasFeedback, validateStatus of ANT Design. If I set validateStatus = 'error' for now which I actually would set with state, I was able to get alert from onFinish function. Am I missing something ?? I read documents and found onFinish will only trigger when validation has passed.
I want to validate that with my own validation rules and states.
function onfinish(){
alert('hi')
}
<Form
form={form}
onFinish={onfinish}
>
<Form.Item
label="Mobile Number"
validateStatus='error'
hasFeedback
name="mobileNumber"
>
<Input id='abc'/>'
</Form.Item>
</Form>
How can I serialize a form whose data structute is different to it's name.
For example, I have following form, which is getting numberofItems from inventory object and displaying in a TextArea.
<Form
enableReinitialize={true}
initialValues={{
numberofItems: inventories.numberofItems
}}
onSubmit={handleSubmit}
>
<FormItem
name={'numberofItems'}
label={'Current Stock'}
maxLength={32000}
>
{inputProps => <TextArea {...inputProps} />}
</FormItem>
</Form>
This works fine when rendering the form. But when I try to post the form, the expected property is null. Because, the service expects inventories.numberofItems where as I am sending numberofItems , as per it's name.
I can avoid this by doing passing the object to form and extracting each field to control.
<Form
enableReinitialize={true}
initialValues={{
inventories: inventories
}}
onSubmit={handleSubmit}
>
<FormItem
name={'inventories.numberofItems'}
label={'Current Stock'}
maxLength={32000}
>
{inputProps => <TextArea {...inputProps} />}
</FormItem>
</Form>
But is there a way I can serialize a control, with a different key from it's name.
In my case, I want to serialize the form with inventories.numberofItems while keeping the name of the control as numberofItems.
<FormItem
name={'numberofItems'}
label={'Current Stock'}
maxLength={32000}
>
{inputProps => <TextArea {...inputProps} />}
</FormItem>
What you can do in order to successfully submit the form (I don't know if it fits your needs though, this is what I do in similar cases in my code where I have JAX-RS backend which cannot map to unknown properties of object) is set the required property and delete the one that cannot be submitted.
function handleSubmit(myFormObject) {
myFormObject.inventories = {numberofItems: myFormObject.numberofItems}
delete myFormObject.numberofItems
.
.
.
}
redux-form supports such cases though. You can define a Field with property name being a "compound" one and it will properly map to your form object being submitted.
Check this sample codesandbox
<Field name="test.notes" component="textarea" />
In reactjs i am using ant design form. In that form i dont want default validation using getfielddecorator. I want to validate fields with my own validation.How it validate?
For example
<Form onSubmit={this.handlesubmit.bind(this)}> <FormItem>
<input/>
</FormItem>
<FormItem >
<input/>
</FormItem>
<ButtonAnt className="btng" type="primary" htmlType="submit">Save</ButtonAnt>
</Form>
According to the docs,
We provide properties like validateStatus help hasFeedback to
customize your own validate status and message, without using
Form.create and getFieldDecorator.
Also, it seems there is a validator prop (amongst others) that you can use to write your own validator function.
I do it like this
<Form.Item
help={HasError && meta.error}
validateStatus={HasError ? "error" : "validating"}
>
<Input {...input} {...props} className={classes.Input}></Input>
</Form.Item>