I am creating an Express invoice app. Part of the requirements of the form on the front end is to allow the user to add multiple invoice items which include the item name, item quantity and item price. I have the form working when the user only adds one item to the form. Is there a way to allow the form to submit multiple of the same mongoose field type?
Controller Function
exports.createInvoice = async (req, res) =>{
try{
const newInvoice = await Invoice.create(req.body);
res.status(201).json({
status: 'success',
data: {
Invoice: newInvoice
}
});
} catch(err){
res.status(400).json({
status: 'fail',
message: err
});
}
}
Mongoose Schema
{
createdAt: {
type: Date,
default: Date.now()
},
paymentDue: {
type: Date
},
description: {
type: String,
required: false,
trim: true
},
paymentTerms: {
type: Number
},
clientName:{
type: String,
trim: true
},
clientEmail:{
type: String,
trim: true
},
status:{
type: String,
default: 'Pending',
enum: {
values: ['Pending', 'Paid', 'Draft'],
message: 'must be pending, paid or draft'
}
},
senderStreet: {
type: String,
trim: true
},
senderCity: {
type: String,
trim: true
},
senderPostcode: {
type: String,
trim: true
},
senderCountry: {
type: String,
trim: true
},
billToStreet: {
type: String,
trim: true
},
billToCity: {
type: String,
trim: true
},
billToPostcode: {
type: String,
trim: true
},
billToCountry: {
type: String,
trim: true
},
item:[
{
itemName: {
type: String,
trim: true
},
itemQuantity: {
type: Number
},
itemPrice: {
type: Number
}
}
],
totalPrice: {
type: Number,
trim: true
}
})```
Form on Index.ejs page
<div class="new-invoice-form">
<h2>Bill From</h2>
<form action="http://127.0.0.1:3000/new" method="POST">
<label for="Street address">Street address</label>
<input type="text" name="senderStreet">
<div class="address">
<div>
<label for="City">City</label>
<input type="text" name="senderCity">
</div>
<div>
<label for="Postcode">Postcode</label>
<input type="text" name="senderPostcode">
</div>
<div>
<label for="Country">Country</label>
<input type="text" name="senderCountry">
</div>
</div>
<h2>Bill To</h2>
<label for="Client's name">Client's Name</label>
<input type="text" name="clientName">
<label for="Client's email">Client's Email</label>
<input type="text" name="clientEmail">
<label for="Client's address">Client's address</label>
<input type="text" name="billToStreet">
<div class="address">
<div>
<label for="City">City</label>
<input type="text" name="billToCity">
</div>
<div>
<label for="Postcode">Postcode</label>
<input type="text" name="billToPostcode">
</div>
<div>
<label for="Country">Country</label>
<input type="text" name="billToCountry">
</div>
</div>
<div class="dates">
<div>
<label for="Invoice Date">Invoice Date</label>
<input type="date" name="createdAt">
</div>
<div>
<label for="Payment Due">Payment Due</label>
<input type="date" name="paymentDue">
</div>
</div>
<div>
<input type="text" name="item[][itemName]">
<input type="text" name="item[][itemQuantity]">
<input type="text" name="item[][itemPrice]">
<button class="button-5">Post</button>
</form>
</div>