I am having a really hard time accessing the objects within the field array for a calculated field price * quantity = total. Have tried a bunch of regex for the decorated field including field: /invoiceItems\[\d+\]/,
to access and the solution from this PR ( https://github.com/final-form/final-form-calculate/pull/21/commits/dab00f8125079fed402712a4b0ed71663be0ba14 )
In the PR I cant access the index. What is the best way to do a calculation with final form calculate and arrays? I have tried this in Formik as well but ran into the same issue.
Code
Form:
onSubmit={onSubmit}
decorators={[calculator]}
mutators={{
...arrayMutators,
}}
initialValues={{
companyName: "",
companyAddress: "",
companyCity: "",
companyState: "",
companyZip: "",
invoiceNumber: shortid.generate(),
invoicePaymentStatus: "",
invoiceStatus: "",
invoiceItems: [
],
invoiceDate: new Date(),
invoiceDueDate: new Date(
new Date().getTime() + 7 * 24 * 60 * 60 * 1000
),
clientFname: "",
clientLname: "",
billingAddress: "",
billingCity: "",
billingState: "",
billingZip: "",
propertyAddress: "",
propertyCity: "",
propertyState: "",
propertyZip: "",
invoiceTotal: "",
tax: "",
}}
render={({
handleSubmit,
reset,
submitting,
pristine,
values,
form: {
mutators: { push, pop },
},
}) => (
<form onSubmit={handleSubmit} noValidate>
Field Array:
type="button"
onClick={() => push("invoiceItems", undefined)}
>
Add Line Item
</button>
<FieldArray name="invoiceItems">
{({ fields }) =>
fields.map((item, index) => (
<div key={item}>
<Field
name={`${item}.description`}
component={TextField}
placeholder="Description"
/>
<Field
name={`${item}.price`}
component={TextField}
placeholder="Price"
/>
<Field
name={`${item}.quantity`}
component={TextField}
placeholder="Quantity"
/>
<Field
name={`${item}.total`}
component={TextField}
placeholder="Total"
/>
<span
onClick={() => fields.remove(index)}
style={{ cursor: "pointer" }}
>
❌
</span>
</div>
))
}
</FieldArray>
Here is some of the Decorator I have tried. (Its a disaster with so many different attempts & ignore the math as we were just trying to get it to work)
{
field: /invoiceItems\[\d+\]/ ,
updates: {(name, index, value) => {
[`invoiceItems[${index}].total`]: (_ignored, values) => 2
//invoiceItems.total: (price, allValues) => price * 2
}
}
)
Did end up fixing it based on this: How do I combine `final-form-calculate` with `final-form-array`
Here is the finished code:
const calculator = createDecorator(
{
field: /invoiceItems\[\d+\]\.price/,
updates: (value, name, allValues) => {
const totalField = name.replace(".price", ".total");
const quantityField = name.replace(".price", ".quantity");
return {
[totalField]: parseInt(value) * parseInt(getIn(allValues, quantityField)),
};
},
},
{
field: /invoiceItems\[\d+\]\.quantity/,
updates: (value, name, allValues) => {
const totalField = name.replace(".quantity", ".total");
const priceField = name.replace(".quantity", ".price");
return {
[totalField]: parseInt(value) * parseInt(getIn(allValues, priceField)),
};
},
}
);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.