meteor-autoform: Array contains only one entry

Question

here is my problem.

I have an organization which must be linked to several SIRET numbers. For this I have an autoform form (version 7.0.0) which gives the possibility of linking 0, one or more SIRET numbers when creating an organization.

form-for-add

When I submit my form my object contains only one SIRET number while I entered 2 :

{ "label": "My Organization","siret": ["12345678910112"] }

Here is my code :

schemas.js :

static organisation = new SimpleSchema({
    "label": {
        type: String,
        label: function () { return i18n.__("schema.organisation.label"); },
        autoform: {
            autocomplete: "off"
        },
        optional: false
    },
    "siret": {
        type: Array,
        label: function () { return i18n.__("schema.organisation.siret"); },
        optional: true,
        minCount: 1,
        maxCount: 5
    },
    "siret.$": {
        type: String,
        label: function () { return i18n.__("schema.organisation.siret"); },
        optional: true,
        min: 14,
        max: 14,
    },}, { tracker: Tracker })

Part of form for add SIRET:

<div class="tab-pane fade" id="siret10">
                {{#afEachArrayItem name="siret"}}
                <div class="siret-input-container">
                    {{> afFieldInput name="siret"}}
                </div>
                <div class="siret-delete-button-container">
                    <button type="button" class="btn btn-sm btn-danger delete autoform-remove-item">
                        <svg alt="delete" width="100%" height="100%" fill="currentColor" aria-hidden="true"
                            focusable="false" class="overflow-visible">
                            <use xlink:href="/images/sprite.svg#picto_Delete"></use>
                        </svg>
                    </button>
                </div>
                {{/afEachArrayItem}}
                <button type="button" class="btn btn-primary autoform-add-item"
                    data-autoform-field="siret"><span>{{__"organisationManagement.addSiret"}}</span></button>
            </div>

Thanks you for your help !

Answer 1

Your field is an array field but inside the afEachArrayItem loop you always re-define your field (from a data-perspective) as the same:

{{> afFieldInput name="siret"}}

Submitting this will override all values into siret[0].

However, you would need to name these fields siret.0, ..., siret.10 etc.

In order to do that you can use this.index from within afEachArrayItem and wrap this into a helper:

{{> afFieldInput name=(mergeStr "siret" this.index)}}

The helper could be like this:

Template.someTemplate.helper({
  mergeStr(name, index) {
    return `${name}.${index}`
  }
})

Using indexed names for the input will make it work.