Populating a MeteorJS Autoform fields

Question

I am using the very nice Autoform package in Meteor (https://github.com/aldeed/meteor-autoform). I have the reactive forms working great- but want to populate form data to allow editing based on the user selecting a row in a table. Very simple example could be found here:

http://autoform.meteor.com/insertaf

Effectively, I'd like to fill the form data in with data from the "Person" row that the user clicks for editing, but not sure how to do this. Any examples on how to do this would be much appreciated. Thanks!

Form code:

{{#autoForm id="afInsertDemo" type="insert" collection=Collections.People}}
  <div class="form-group {{#if afFieldIsInvalid name='firstName'}}has-error{{/if}}">
    <label class="control-label">{{afFieldLabelText name='firstName'}}</label>
    {{> afFieldInput name='firstName'}}
    {{#if afFieldIsInvalid name='firstName'}}
    <span class="help-block">{{{afFieldMessage name='firstName'}}}</span>
    {{/if}}
  </div>
  <div class="form-group {{#if afFieldIsInvalid name='lastName'}}has-error{{/if}}">
    <label class="control-label">{{afFieldLabelText name='lastName'}}</label>
    {{> afFieldInput name='lastName'}}
    {{#if afFieldIsInvalid name='lastName'}}
    <span class="help-block">{{{afFieldMessage name='lastName'}}}</span>
    {{/if}}
  </div>
  <div class="form-group {{#if afFieldIsInvalid name='age'}}has-error{{/if}}">
    <label class="control-label">{{afFieldLabelText name='age'}}</label>
    {{> afFieldInput name='age'}}
    {{#if afFieldIsInvalid name='age'}}
    <span class="help-block">{{{afFieldMessage name='age'}}}</span>
    {{/if}}
  </div>
  <div class="form-group">
    <button type="submit" class="btn btn-primary">Add Person</button>
    <button type="reset" class="btn btn-default">Reset Form</button>
  </div>
{{/autoForm}}

Meteor Javascript

Schemas = {};

UI.registerHelper("Schemas", Schemas);

Schemas.Person = new SimpleSchema({
  firstName: {
    type: String,
    index: 1,
    unique: true
  },
  lastName: {
    type: String,
    optional: true
  },
  age: {
    type: Number,
    optional: true
  }
});

var Collections = {};

UI.registerHelper("Collections", Collections);

People = Collections.People = new Mongo.Collection("People");
People.attachSchema(Schemas.Person);

Meteor.publish(null, function () {
  return People.find();
});

People.allow({
  insert: function () {
    return true;
  },
  remove: function () {
    return true;
  }
});

Answer 1

Just change

{{#autoForm id="afInsertDemo" type="insert" collection=Collections.People}}

to

{{#autoForm id="afUpdateDemo" type="update" doc=someDoc collection=Collections.People}}

therefore you'll change your type property from insert to update and also add a doc property to tell the autoform which doc it will update. You can return the doc from your template helper.

The autoform documentation for the autoform component at https://github.com/aldeed/meteor-autoform#autoform-1 explains the type and doc attributes as:

type: Optional. One of "insert", "update", or "method". Setting the type to anything else or omitting it will call any onSubmit hooks, where you can do custom submission logic. If onSubmit does not return false or call this.event.preventDefault(), the browser will also submit the form. This means that you can use AutoForm to generate and validate a form but still have it POST normally to some non-Meteor HTTP endpoint.

doc: Required for an update form, and must have at least an _id property. Pass the current document object, retrieved with a call to findOne() for example. For an insert form, you can also use this attribute to pass an object that has default form values set (the same effect as setting a value attribute on each field within the form).

Note: I've also changed the id property so that you can reference to this form separately later on. But there are ways you can reuse a single form for update/insert as explained at https://github.com/aldeed/meteor-autoform#can-i-reuse-the-same-quickform-or-autoform-for-both-inserts-and-updates

Can I reuse the same quickForm or autoForm for both inserts and updates?

Yes. Your code that flips between states should do the following in this order:

1. Change the type attribute's value to "insert" or "update" as appropriate, probably by updating a reactive variable.

2. Change the doc attribute's value to the correct document for an update or to null (or a document containing default values) for an insert, probably by updating a reactive variable.

3. Call AutoForm.resetForm(formId). This will clear any existing validation errors for the form.