Tworzenie formularza tablicowego, w którym każdy element jest typem "wybierz"

Question

Używam autoformacji w projekcie meteorytów i używam afArrayField dla mojego pola dimensions w moim formularzu NewStack.

Obecnie wygląda to tak.

A oto jak to jest renderowane:

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> 

Co chciałbym zobaczyć dla każdego z pól wymiarów jest rozwijana wypełniane opcje ustawione w schemacie (np. dim1, dim2 i dim3). Jednak nie mogę sprawić, że formularz będzie renderowany jako coś innego niż zwykły tekst.

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

     } 
    } 
}); 

Co ciekawe, jeśli zmienię afArrayField do afQuickField w NewStack.html Wydaje się, że AUTOFORM mogą teraz zobaczyć moje opcje (ale tracę funkcjonalność tablicy oczywiście)

Jakieś myśli? Czy jest coś nieodłącznego w przypadku afArrayField, które uniemożliwia mi korzystanie z jakiegoś trybu selekcji?

Answer 1

Można określić opcje dla każdego elementu w tablicy przy użyciu $:

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

To jest wymienione w AUTOFORM docs.

Answer 2

Spróbuj zmienić swój schemat do:

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