Создание формы массива, где каждый элемент является типом "select"

Я использую autoform в моем проекте meteor и использую afArrayField для моего поля dimensions в моей форме NewStack.

В настоящее время он выглядит следующим образом.

И вот как это делается:

NewStack.html

<template name="NewStack">
    <div class="new-stack-container">
        {{#autoForm collection=stacks id="insertStackForm" type="method" meteormethod="createStack" class="new-stack-form"}}
        <fieldset>
            <legend>Add a Stack!</legend>
            {{> afQuickField name='desc'}} 
            {{> afArrayField name='dimensions'}}
        </fieldset>
        <button type="submit" class="btn btn-primary">Insert</button>
        {{/autoForm}}
    </div>
</template>

То, что я хотел бы увидеть для каждого из полей измерений, - это раскрывающийся список, заполненный параметрами, которые я задал в схеме (т.е. dim1, dim2 и dim3). Однако я не могу представить форму для отображения как ничего, кроме обычного ввода текста.

Stacks.js

StackSchema = new SimpleSchema({
    desc: {
        type: String,
        label: "Description"
    },
    dimensions: {
        type: [String],
        autoform: {
            type: "select",
            afFieldInput: {
                options: [
                    {label: "dim1", value: 1},
                    {label: "dim2", value: 2},
                    {label: "dim3", value: 3}
                ]
            },

        }
    }
});

Интересно, если я изменил значение afArrayField на afQuickField в NewStack.html. Похоже, что autoform теперь может видеть мои параметры (но я, очевидно, теряю функциональность массива)

Любые мысли? Есть ли что-то, что присуще afArrayField, что мешает мне использовать какой-то режим выбора?

Ответ 1

Вы можете указать параметры для каждого элемента массива с помощью $:

const StackSchema = new SimpleSchema({
  desc: {
    type: String,
    label: "Description"
  },
  dimensions: {
    type: [String],
  },
  "dimensions.$": { // note this entry
    type: String,
    autoform: {
      afFieldInput: {
        options: [
          {label: "dim1", value: 1},
          {label: "dim2", value: 2},
          {label: "dim3", value: 3}
        ]
      },
    }
  }
});

Он упоминается в autoform docs.

Ответ 2

Попробуйте изменить схему:

dimensions: {
    type: [String],
    autoform: {
        type: "select",
        options: [
            {label: "dim1", value: 1},
            {label: "dim2", value: 2},
            {label: "dim3", value: 3}
        ],
    }