score:6
if you're using antd version 4.9.0+, you can take advantage of the initialvalue
property on the form.list
. this allows you set intial values on the form items of the array. alternatively, you can set the initialvalues
property on the form
. here's a minimum viable example using the former method.
import { form, input, button, space } from "antd";
import { minuscircleoutlined, plusoutlined } from "@ant-design/icons";
import react from "react";
//basic idea
/*
i want the user to be able to edit some details of a purchase order that already exists in the database,
then resubmit the order with a form.
the details of the purchase order should be orginally displayed in the form input fields,
and the user can change them directly via those fields.
*/
//this is the order that already exists
const order = {
po_number: "123abc",
carrier: "fastway",
items: [
{
item_code: "dnh75n",
quantity: "10",
special_requirements: "add picture of happy dog"
},
{
item_code: "456def",
quantity: "4",
special_requirements: "do not include lids"
}
]
};
const groupform = () => {
const onfinish = (values) => {
console.log(values);
};
//create form fields based off how many items are in the order
const iteminputs = order.items.map((item) => {
return {
item_code: item.item_code,
quantity: item.quantity,
special_requirements: item.special_requirements
};
});
return (
<div>
<form onfinish={onfinish}>
<b>{"order " + order.po_number}</b>
<form.item name="carrier" label="carrier" initialvalue={order.carrier}>
<input style={{ width: "500px" }} />
</form.item>
<form.item
name="po_number"
label="po number"
initialvalue={order.po_number}
hidden
>
<input />
</form.item>
<b>order items</b>
<form.list name="items" initialvalue={iteminputs}>
{(fields, { add, remove }) => (
<>
{fields.map((field) => (
<space
key={field.key}
style={{ display: "flex", marginbottom: 8 }}
align="baseline"
>
<form.item
{...field}
name={[field.name, "item_code"]}
fieldkey={[field.fieldkey, "item_code"]}
>
<input placeholder="item code" />
</form.item>
<form.item
{...field}
name={[field.name, "quantity"]}
fieldkey={[field.fieldkey, "quantity"]}
>
<input placeholder="quantity" />
</form.item>
<form.item
{...field}
name={[field.name, "special_requirements"]}
fieldkey={[field.fieldkey, "special_requirements"]}
>
<input placeholder="quantity" />
</form.item>
<minuscircleoutlined onclick={() => remove(field.name)} />
</space>
))}
<form.item>
<button
type="dashed"
onclick={() => add()}
block
icon={<plusoutlined />}
>
add item
</button>
</form.item>
</>
)}
</form.list>
<form.item>
<button type="primary" htmltype="submit">
{" "}
change details{" "}
</button>
</form.item>
</form>
</div>
);
};
export default groupform;
// i want to submit a form object that looks like this. e.g.
// this is what 'onfinish' should display in the console
/*
{
po_number:"123abc",
carrier:"fastway",
items: [{
item_code:"dnh75n",
quantity:"10",
special_requirements:"add picture of happy dog"
},
{
item_code:"456def",
quantity:"4",
special_requirements:"do not include lids"
}
]
}
*/
score:1
thanks to scratch'n'purr, i used your solution to further put the fields into an antd table.
first a short note: fieldkey={[field.fieldkey, "quantity"]}
from the previous solution didn't work for me, but changing it to key={[field.key, "quantity"]}
did the trick.
//define the columns for the table
const columns = [
{
title: "item#",
dataindex: "item_code",
key: "item_code",
width: "12%",
//use the field here to get all infos for the form
render: (_, field) => (
<form.item
{...field}
name={[field.name, "item_code"]}
key={[field.key, "item_code"]}
nostyle
>
<input placeholder="item#" />
</form.item>
),
},
{
title: "quantity",
dataindex: "quantity",
key: "quantity",
render: (_, field) => (
<form.item
{...field}
name={[field.name, "quantity"]}
//@ts-ignore
key={[field.key, "quantity"]}
nostyle
>
<input placeholder="quantity" />
</form.item>
),
}];
const groupform = () => {
const onfinish = (values) => {
console.log(values);
};
//create form fields based off how many items are in the order
const iteminputs = order.items.map((item) => {
return {
item_code: item.item_code,
quantity: item.quantity,
special_requirements: item.special_requirements,
};
});
return (
<div>
<form onfinish={onfinish}>
<b>{"order " + order.po_number}</b>
<form.item name="carrier" label="carrier" initialvalue={order.carrier}>
<input style={{ width: "500px" }} />
</form.item>
<form.item
name="po_number"
label="po number"
initialvalue={order.po_number}
hidden
>
<input />
</form.item>
<b>order items</b>
<form.list name="items" initialvalue={iteminputs}>
{(fields, { add, remove }, { errors }) => (
<>
{/* this is where to put the table. as a data source i used the fields */}
<table datasource={fields} columns={columns} pagination={false} />
<form.item>
<button
type="dashed"
onclick={() => add()}
style={{ width: "60%" }}
icon={<plusoutlined />}
>
add field
</button>
<form.errorlist errors={errors} />
</form.item>
</>
)}
</form.list>
<form.item>
<button type="primary" htmltype="submit">
{" "}
change details{" "}
</button>
</form.item>
</form>
</div>
);
};
Source: stackoverflow.com
Related Query
- How to create dynamic form input fields in React with ANTd
- How to create a signup form with React and Why won't a function be executed when called insight a form after input field?
- How can I get form dynamic input data with React Js?
- How to create a form with text and file input in react and send form data to server using Nodejs?
- How to clear input values of dynamic form in react
- How to create a controlled input with empty default in React 15
- How to get form data from input fields in React
- How can i create input text fields dynamically in react js - JSX?
- How Do I Create A 2 Column Form WIth React Material-UI?
- How to pass input values from a child Form component to the state of its parent component for submission with react hooks?
- React how to make an input field with a fixed value combined with a dynamic value
- react dynamic form values with antd
- How Can I create a Handle an input object with React hooks
- How to validate react input fields with some custom validation
- How to create dynamic MUI Radio in Formik React form
- How to set a general onchange for the dynamic form fields coming from api in react js.?
- How to handle a form with many fields in React
- How to get the value of Antd Form with React Hooks?
- How to select an input form that doesn't have a label with React testing library?
- Dynamic Forms - How to update the value of multiple form fields on 'onChange' event using react hooks?
- React Form Dynamic Input Fields
- How to update Highcharts with React JS via input fields
- React+JavaScript How to create an object in React with all the given fields
- How to have dynamic rowspan with antd react
- How to prefill certain fields on a create form using previous data with react-admin?
- How to create a reusable Input component with React & TypeScript?
- How to disable autofill for antd input with react
- How do I format AntD form input fields such as phone numbers and SSNs in React?
- How to bind checkbox value with text input in dynamic form with react-js?
- Submit a standard HTML form with React input fields
More Query from same tag
- How to remove eslint plugin eslint-plugin-jsx-a11y?
- currentUser is displayed undefined
- TypeScript checking in React Functional components
- When given a sentence, how to create a border for every single word including whitespace through iteration in react?
- Ant design type script Input field validation not working
- How to handle multiple input values in redux?
- How to show a loader via HOC?
- Typescript property does not exist on extended type
- storing a fragment vs using a component in react
- How to change text color in a Button?
- React router not rendering the component on click of a Array item
- I want to call parent function into function which is wraped in object
- NPM + React + TypeScript with AMD modules
- showing details of a record using ReactJS
- reactjs: Does setState() immediately change this.state?
- How to submit a form in react-materialize?
- How to filter an array from an array
- Rendering API data inside tab
- Dynamic Avatar using Material UI and React
- How to pass value of button to the function in react
- React onComponentDidMount event with react-redux connect
- key prop warning in react with key and child components
- React getInitialState not working
- Web3.givenProvider returns null
- Check if Array has all ID values from another Array of Objects ( ReactJS )
- How to display data after getting complete data from API endpoint in react native?
- how to setState an array which is nested inside an array of objects
- How to Display different API results in the same place when clicking on the links given in navbar?
- Clickable url value in ag-grid with react
- How to use async-await in onsubmithandler