Autoform reference specific field within array

Question

I'm trying to use an autoform to update an array object within a collection. The collection contains lots of information however with this form I only want to update the careerHistory. I would like to be able to control the layout of the form using bootstrap columns. To do this I need to be able to reference careerHistory.$.company and careerHistory.$.title independently. Currently, I'm only able to render the form by referencing name="careerHistory". Whenever I try to reference the specific field within the array the form doesn't print.

Path: Profile.js

import { Mongo } from 'meteor/mongo';
import SimpleSchema from 'simpl-schema';
import { addressSchema } from '../../sharedSchemas/addressSchema.js';

SimpleSchema.extendOptions(['autoform']);

export const Profile = new Mongo.Collection('Profile');

Profile.allow({
  insert: function(userId, doc) {
    return !!userId;
  },
  update: function(userId, doc) {
    return !!userId;
  },
  remove: function(userId, doc) {
    return !!userId;
  }
});    

Schemas.Profile = new SimpleSchema({
      userId: {
        type: String,
        optional: true
      },
      'careerHistory.$': Object,
      'careerHistory.$.company': {
        type: String,
        optional: false,
      },
      'careerHistory.$.title': {
        type: String,
        optional: true,
    });

Profile.attachSchema(Schemas.Profile);

Path: Profile.html

{{#autoForm collection=profileCollection doc=profile id="candidateCareerHistory" type="update"}}
  {{> afArrayField name="careerHistory"}}
{{/autoForm}}

Path: Profile.js

profile() {
  return Profile.findOne({userId: Meteor.userId()});
},
profileCollection() {
  return Profile;
}

Answer 1

It is possible to do this if you use the afEachArrayItem block helper and build your chart for the specific fields you are after. Here is an example.

{{#autoForm collection=Profile doc=profile id="candidateCareerHistory" type="update-pushArray" scope="careerHistory"}}
  {{#if afFieldIsInvalid name="careerHistory"}}
    <div class="panel-body has-error">
      <span class="help-block">{{{afFieldMessage name="careerHistory"}}}</span>
    </div>
  {{/if}}

  {{#afEachArrayItem name="careerHistory"}}
    <button type="button" class="btn btn-primary autoform-remove-item"><span class="glyphicon glyphicon-minus"></span></button>
    {{> afFieldInput name=this.current.company}}  
    {{> afFieldInput name=this.current.title}}
  {{/afEachArrayItem}}
  <button type="button" class="btn btn-primary autoform-add-item" data-autoform-field="careerHistory"><span class="glyphicon glyphicon-plus"></span></button>
{{/autoForm}}

Now you can style your fields using whatever mechanism you want. Note, you will have to add in your own "add" and "remove" buttons when you build a form this way. I have included the default add/remove above.

Please refer to the default template for a full bootstrap styling example.