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

【问题标题】：Submission fails when using custom contact form module in Apostrophe CMS在 Apostrophe CMS 中使用自定义联系表单模块时提交失败
【发布时间】：2019-08-29 01:33:36
【问题描述】：

我正在关注https://docs.apostrophecms.org/apostrophe/tutorials/intermediate/forms 的“Going Deeper”部分，但我想控制表单标记的输出，而不是使用 schema:macro.html 所允许的。我能够让表单很好地填充在页面上，但是当我尝试提交时，我得到了“事情不正确”的警报。这基本上意味着在 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>

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

【问题讨论】：

对于其他上下文，如果我在教程中使用 widget.html 的标记，它可以工作。我很好奇如何在工作示例中使用上面包含的标记？

标签： apostrophe-cms

【解决方案1】：

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

【讨论】：