在 Apostrophe CMS 中使用自定义联系表单模块时提交失败

Question

我正在关注 https://docs.apostrophecms.org/apostrophe/tutorials/intermediate/forms 的 "Going Deeper" 部分，但我想控制表单标记的输出，而不是使用 schema:macro.html 允许.我能够让表单很好地填充到页面上，但是当我尝试提交时，我收到 "Something's not right" 警报。这基本上意味着 apos.schemas.convert() 调用中某处存在错误。但我似乎无法弄清楚错误在哪里。

我几乎复制了上面列出的教程，除了 widget.html 是我自己的表单标记版本。

所以我的 lib/modules/contact-form/index.js, lib/modules/contact-form-widgets/index.js and /lib/contact-form-widgets/always.js 中的代码与教程中的代码几乎完全相同，因此为了简洁起见，我不会在此处复制它们。下面是我的 lib/modules/contact-form-widgets/views/widget.html 我如何输出表单字段：

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <form class="form contact-form mt-5" id="contactForm" data-contact-form>
        {% for field in data.schema %}
          {% if field.type === 'string' and field.textarea %}
            <div class="form-group">
              <label class="input-label" for="{{field.name}}">{{field.label}}</label>
              <textarea class="textarea-input" id="{{field.name}}" name="{{field.name}}" rows="5" placeholder="Type here"></textarea>
            </div>
          {% elif field.type === 'select' %}
            <div class="form-group">
              <label class="input-label" for="{{field.name}}">{{field.label}}</label>
              <select class="select-input" name="{{field.name}}">
                <option>Choose below...</option>
                {% for choice in field.choices %}
                  <option value="{{choice.value}}">{{choice.label}}</option>
                {% endfor %}
              </select>
            </div>
          {% else %}
            <div class="form-group">
              <label class="input-label" for="{{field.name}}">{{field.label}}</label>
              <input class="form-input" type="text" id="{{field.name}}" name="{{field.name}}" placeholder="{{field.label}}" value=""/>
            </div>
          {% endif %}
      {% endfor %}
      <button class="btn primary" type="submit">Submit</button>
      {# Later gets hoisted out and becomes visible #}
      <div class="thank-you" style="display: none;" data-thank-you>
        <h4>Thank you for getting in touch! We'll respond soon.</h4>
      </div>
    </form>
  </div>
</div>

预期结果是提交成功。任何帮助将不胜感激。到目前为止，我喜欢撇号平台。

Answer 1

因此，在查看 apostrophe-schemas/views/macros.html 的内部包含的内容并进行调查之后，如果发现我没有包含某些我遗漏的关键数据属性。我基本上只需要添加一个 data-name={{field.name}} 到我的 form-groups 并且表单提交现在可以工作了。

在 Apostrophe CMS 中使用自定义联系表单模块时提交失败

Submission fails when using custom contact form module in Apostrophe CMS

apostrophe-cms