Meteor autoform form is undefined

Question

I am trying to use a quickform to do method-update but whenever I type and submit the following errors appear in the console.

Uncaught TypeError: Cannot read property 'validation' of undefined
Uncaught TypeError: Cannot read property 'autosave' of undefined
Uncaught TypeError: Cannot read property 'type' of undefined

{{#quickForm id="archiveIssue" type="method-update" meteormethod="editIssue" collection=collection doc=doc autocomplete="off"}}
  {{> afQuickField name='Notes'}}
{{/quickForm}}

The helper function to retrieve the collection.

Template.archiveIssue.helpers({
  doc: function () {
    return Session.get("archiveDoc");
  },
  collection: function () {
    return Collections.Issues;
  }
});

The problems do not come from the meteor method, the method never actually gets called. They started appearing after updating the autoform package -> https://github.com/aldeed/meteor-autoform/blob/master/CHANGELOG.md

The Cannot read property 'validation' of undefined appears on keyup for everything typed. The other 2 appear when I attempt to submit.

Methods

if (Meteor.isServer){
  Meteor.methods({
    newIssue: function(doc) {
      check(doc, Schema.Issues);
      Collections.Issues.insert({
        User: Meteor.user()._id,
        Description: doc.Description,
        createdAt: new Date,
        Archived: {
          "Archived": false,
          "User": null,
          "Notes": null
        },
      });
    },
    editIssue: function(modifier, docId) {
      console.log('editIssue called; modifier = ' + JSON.stringify(modifier, null, 4) + '; docId = ' + docId);
      check(modifier, Schema.Issues);
      Collections.Issues.update({
          "_id": docId
        },
        modifier
      );
    },
  });
}

Schema

Collections.Issues = new Mongo.Collection('issues');

Schema.Issues = new SimpleSchema({
  Description: {
    type: String,
    max: 500,
    optional: true
  },
  User: {
    type: String,
    label: "User",
    optional: true
  },
  Notes: {
    type: String,
    label: "Notes",
    optional: true
  },
  Archived: {
    type: Object,
    optional: true
  },
  "Archived.Archived": {
    type: Boolean,
    optional: true
  },
  "Archived.User": {
    type: String,
    max: 50,
    label: "Archiving User",
    optional: true
  }, 
  "Archived.Notes": {
    type: String,
    label: "Notes",
    optional: true
  }
});

Collections.Issues.attachSchema(Schema.Issues);

Templates

<template name="issues">
    <div style="width:90%">
        <h1><i class="fa fa-exclamation-triangle"> Issues</i></h1>
      <h2> Active </h2>
        {{> issueModal}}
        {{> tabular table=TabTables.Issues selector=Active_Selector class="table table-striped table-bordered table-condensed" width="100%"}}
      <h2> Archived </h2>
        {{> tabular table=TabTables.Issues_Archived selector=Archive_Selector class="table table-striped table-bordered table-condensed" width="100%"}}      
    </div>
</template>

<template name="issueModal">
    <div class="modal fade" id="insertIssueModal" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">New Issue</h4>
          </div>
          <div class="modal-body">
            <p>{{> insertIssue}}</p>
          </div>
        </div>
      </div>
    </div>

    <div class="addButton"><button type="button" class="btn btn-success" data-toggle="modal" data-target="#insertIssueModal"><i class="fa fa-plus-square fa-lg"> Add Issue</i></button></div>
</template>

<template name="insertIssue">
  {{#quickForm id="insertIssue" type="method" meteormethod="newIssue" collection=collection validation="keyup" fields="Description" omit="User,Archived.Archived,Archived.User,Archived.Notes" autocomplete="off"}}
  {{/quickForm}}
</template>

<template name="archiveIssueModal">
    <div class="modal fade" id="archiveIssue" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header" >
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title" ><i class="fa fa-archive"> Archive Issue</i></h4>
          </div>
          <div class="modal-body">
            <p>{{> archiveIssue}}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="archiveButton" style="margin: auto 0;" align="center">
      <button id="archiveButton" type="button" class="btn btn-xs btn-info" data-toggle="modal" data-target="#archiveIssue"><i class="fa fa-archive"> Archive</i></button>
    </div>
</template>

<template name="archiveIssue">
  <div align="left">
    {{#quickForm id="archiveIssue" type="method-update" meteormethod="editIssue" collection=collection doc=doc autocomplete="off"}}
      {{> afQuickField name='Notes'}}
    {{/quickForm}}
  </div>
</template>

Archive doc is set from a helper

Template.archiveIssueModal.events({
  "click .archiveButton": function (event) {
    Session.set("archiveDoc", this);
  }
});

Answer 1

I just got this exact problem and the issue was that I had another HTML tag with the very same ID than my form.

Changing either the HTML tag ID or the form ID resolved the issue. :)