创建一个数组表单,其中每个元素都是'select'类型

Chr*_*ris 10 meteor meteor-blaze meteor-autoform

我正在我的流星项目中使用autoform并在我的表单中使用afArrayFieldfor my dimensionsfield NewStack.

它目前看起来像这样.

autoform图像渲染

以下是它的呈现方式:

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>
Run Code Online (Sandbox Code Playgroud)

我希望看到每个维度的字段是填充了我在模式设置的选项下拉(即dim1,dim2dim3).但是我似乎无法将表单呈现为除纯文本输入之外的任何内容.

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}
                ]
            },

        }
    }
});
Run Code Online (Sandbox Code Playgroud)

有趣的是,如果我在NewStack.html中更改afArrayFieldafQuickField,那么autoform现在可以看到我的选项(但我显然失去了数组功能)

选择例子

有什么想法吗?有什么内在的东西afArrayField阻止我使用某种选择模式吗?

Mas*_*rAM 6

您可以使用以下命令为数组中的每个元素指定选项$:

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}
        ]
      },
    }
  }
});
Run Code Online (Sandbox Code Playgroud)

渲染形式

它在autoform docs中提到过.