NodeJS Form not submitting Data porperly

Question

I am trying to submit a form to create a new Appointment in my mongo database. When the form submits, I get a validation error telling me that certain fields are required. I have console.logged the fields from the form (as you can see under "Controllers") and they are empty. I have tried tracing the submission process, but I have no idea where the form is losing the information. I currently have the exact same setup for submitting a new car into my database and it works perfectly. The same console.logs in my car submission controller print out the new car object. I provided my routing, appointment model, controllers and form code below. I successfully reach the console.logs in my controller so I do not think it is a routing issue. I have also included the exact error message I get at the end of this post. I believe the form loses all data sometime between submission and validation, but I am not sure how to debug that, and am totally lost on how to fix this issue.

Routing:

const express = require('express');
const router = express.Router();
const appts = require('../controllers/appointments');
const catchAsync = require('../utils/catchAsync');
const { isLoggedIn, isAuthor } = require('../middleware');

const Appt = require('../models/appointments');


router.route('/')
    .get(catchAsync(appts.index))
    .post(catchAsync(appts.createAppt));


router.get('/new',appts.renderNewForm);


module.exports = router;

Controller:

const Appt = require('../models/appointments');

module.exports.createAppt = async (req,res) =>{
    const appt = new Appt(req.body.appt);
    console.log("Body: ",req.body);
    console.log("Body: ",req.body.appt);
    console.log("appt: ",appt);
    //campground.author = req.user._id;
    await appt.save();
    req.flash('success', 'Successfully sent! Thank you for scheduling some time to meet with us, see you soon!');
    res.redirect(`/cars`);
}

Model:

const mongoose = require('mongoose');
const Schema = mongoose.Schema;

const ApptSchema = new Schema({
    name:String,
    email:{
        type:String,
        required: true
    },
    phone:{
        type:Number,
        required: true
    },
    date:{
        type:Date,
        required: true
    },
    time:{
        type:String,
        required: true
    },
    interests: String,
    scheduleTime:Date
});

module.exports = mongoose.model('Appointment',ApptSchema);

Form:

<% layout('layouts/boilerplate')%>

<div class="display-3 text-center">SCHEDULE AN APPOINTMENT ONLINE:</div>

    <div class="row">
        <div class="col-md-6 offset-md-3">
            <form action="/appointments" method="POST" novalidate class="validated-form" enctype="multipart/form-data">

                <div class="mb-3">
                    <label class="form-label" for="name">Name</label>
                    <input class="form-control" type="text" id="name" name="appt[name]" required>
                    <div class="valid-feedback">
                        Looks good!
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label" for="email">Email</label>
                    <input class="form-control" type="email" id="email" name="appt[email]" required>
                    <div class="valid-feedback">
                        Looks good!
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label" for="phone">Phone Number:</label>
                    <input class="form-control" type="tel" id="phone" name="appt[phone]" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required>
                    <small>Format: 555-456-7890</small>
                </div>

                <div class="mb-3">
                    <label for="date" class="form-label">Please Enter your Prefered Date</label>
                    <input class="form-control" type="date" id="date" name="appt[date]" required>
                </div>

                <div class="mb-3">
                    <label for="time" class="form-label">Please Select a Time Slot</label>
                    <select class="form-control" id="time" name="appt[time]" required>
                      <option value="morning">Morning (10-11:30am)</option>
                      <option value="afternoon">Afternoon (12-2:30pm)</option>
                      <option value="evening">Evening (3-4:30pm)</option>
                    </select>
                </div>

                <div class="mb-3">
                    <label class="form-label" for="interests">What are you interested in?</label>
                    <textarea class="form-control" type="text" id="interests" name="appt[interests]" placeholder="example: All wheel drive family car with great mileage." required></textarea>
                    <div class="valid-feedback">
                        Looks good!
                    </div>
                </div>
                
                <div class="mb-3">
                <label><strong>Appoitnment Request will be sent to Just Cars. You will shortly receive an email with a specified time within your time slot for your appointment.</strong></label>
                </div>

                <div class="mb-3 text-center">
                    <button class="btn btn-success">Request Appointment</button>
                </div>
            </form>
        </div>
    </div>

    <div class="container">
        <div class="row text-center" style="margin-top:40px; margin-bottom:50px;">
            <div class="display-6"><strong>OTHER SCHEDULING OPTIONS, OR RESCHEDULE AN APPOINTMENT: </strong></div>
            <div class="mt-4">
                <a class = "btn btn-lg btn-outline-dark mx-3" href="tel:3853237118"><i class="fas fa-phone"></i> CALL US AT (385)323-7118</a>
                <a class = "btn btn-lg btn-outline-dark mx-3" href="mailto:"><i class="fas fa-envelope"></i> SEND US AN EMAIL</a>
            </div>
        </div>
    </div>

<hr class="my-4">

<div class="text-center"><a class="btn btn-dark" href="/cars">Back to All Cars</a></div>

Error from Browser

ValidationError: Appointment validation failed: time: Path `time` is required., date: Path `date` is required., phone: Path `phone` is required., email: Path `email` is required.
    at model.Document.invalidate (/Users/Joselito/Desktop/JustCarsFinal/node_modules/mongoose/lib/document.js:2626:32)
    at /Users/Joselito/Desktop/JustCarsFinal/node_modules/mongoose/lib/document.js:2446:17
    at /Users/Joselito/Desktop/JustCarsFinal/node_modules/mongoose/lib/schematype.js:1225:9
    at process._tickCallback (internal/process/next_tick.js:61:11)

Answer 1

Changed enctype from "multipart/form-data" to "application/x-www-form-urlencoded" in my edit form and now everything works.

If anyone is able to explain this to me, I would very much appreciate it. I know that forms of enctype="multipart/form-data" are used for forms that require file input, but I thought they also work on forms without files. Is file input a requirements for "multipart/form-data" enctypes?