Autoform nested category and sub category select options

help
1

I am using autoform + simple schema to generate a form field like this…

collections/ingredients.js

Ingredients.attachSchema(new SimpleSchema({
...
  category: {
    type: String,
    label: "Category",
    optional: true,
  },
...
}));

client/ingredients/ingredients.html

...
{{> afQuickField name='category' options=ingredientsCatsOptions}}
...

client/ingredients/ingredients.js

Template.updateIngredient.helpers({
    ingredientsCatsOptions: function() {
    return ingredientsCats.find({}, {fields: {ingredientCatName: 1}}).map(function (c){
        return {label: c.ingredientCatName, value: c._id};
    });
    }
});

This is all working fine however, my categories can be parent categories or subcategories and I would like the drop down selection to represent the tree structure of the categories.

Doing what’s suggested here works to generate a drop down selection showing the nested categories but I am unsure how to generate it from autoform instead of using a template.

I guess what I am asking is how can I replace this…

{{> afQuickField name='category' options=ingredientsCatsOptions}}

with this…

<select id="category" name="category" class="category">
  <option value="">--Select--</option>
  {{#each get_categories}}
    <option value="{{_id}}">{{name}}</option>
  {{/each}}
</select>

and still have it work properly with autoform?

Thanks

2

I use the autoform option of SimpleSchema and reactivity for it, with the help of some global Session variables. Here is an example

Schemas.ProductDescription = new SimpleSchema({
  name: {
   label: 'Product Name',
   type: String,
  },
  type: {
   type: String,
  },
  subtype: {
   type: String,
   autoform: {
    options: function() {
      var options = [];
      var pa = Session.get('SchemasProductBusinessType');
      var pt = Session.get('SchemasProductType');
      if(pt) {
       var BT = BusinessTypes.findOne({value: pa, 'children.name': pt});
       if(BT && BT.children)
       {
        BT.children.forEach(function(child){
         if(child.name == pt)
         {
          options = _.map(child.types,function(t){return {label: t,value: t}});
         }
        })
       }
      return options;
     }
    }
   }
  },
});