Meteor: issue retrieving and inserting subdocuments

Very new to Meteor, I’ve gone through the tutorial and added a router and now working with autoform / collections2. Things were fine until I introduced a sub document below(ingredients).

I can’t seem to get the data for the ingredients array and insert into mongodb. Anyone have any ideas? Thank you in advance to anyone who takes the time to help!

Error in console: Uncaught TypeError: Cannot read property ‘value’ of undefined

My form event on client:

Template.newRecipe.events({
   'submit form'(event) {
     event.preventDefault();

     // Get value from form element
    const target = event.target;
    const title = target.title.value;
    const description = target.description.value;
    const ingredients = target.ingredients.value; // line causing above error

    // Insert a task into the collection
    Meteor.call('recipes.insert', title, description, ingredients);
    document.getElementById('insertRecipeForm').reset();
  },
});

My server Method:

Meteor.methods({
  'recipes.insert'(title, description, ingredients) {
    Recipes.insert({
      title,
      description,
      ingredients,
    });
  },
});

My schema:

Recipes = new Mongo.Collection('recipes');
Ingredient = new SimpleSchema({
  name: {
    type: String
  },
  amount: {
    type: String
  }
});
Recipe = new SimpleSchema({
  title: {
    type: String,
    label: "Title"
  },
  description: {
    type: String,
    label: "Description",
    autoform: {
      rows: 6
    }
  },
  ingredients: {
    type: [Ingredient]
  }
});

Recipes.attachSchema(Recipe);

I would bet that error happens in your event handler. When you use autoform you normally don’t provide a submit event handler. Look at the autoform documentation.