在撇号 CMS 中创建表单答案

【问题标题】：Creating forms in Aposstrophe CMS在撇号 CMS 中创建表单
【发布时间】：2017-01-25 04:39:01
【问题描述】：

我正在关注 this tutorial 在我的项目中创建一个表单，该表单正在利用 Apostrophe CMS。当我按照教程进行操作时，我能够创建表单并提交，并了解如何在管理控制台中查看表单提交。

但是，当我开始自定义表单以适应我的项目特定需求时，我破坏了表单，导致表单验证失败。我在提交表单时遇到的错误是：

TypeError: Cannot read property 'length' of undefined at Object.convertString [as convert] (user.js:727) at user.js:145 at async.js:181 at iterate (async.js:262) at Object.async.forEachOfSeries.async.eachOfSeries (async.js:281) at Object.async.forEachSeries.async.eachSeries (async.js:214) at Object.self.convert (user.js:127) at convert (always.js:57) at async.js:718 at iterate (async.js:262)

我的更改，除了调整我的contact-form:index.js 文件的字段定义对象之外，大部分都在contact-form-widgets:widget.html 文件中。

在本教程中，contact-form-widgets:widget.html 视图导入 apostrophe-schemas:macros.html，并使用 apostrophe-schemas 和 apostrophe-ui 模块中的 html 文件来构建表单的 html。因此，我的具体问题与这两个模块的重要性有关。那些模块只是用于表单的前端显示吗？这些模块的视图内容是否对表单的提交和提交后任务有任何影响？如果答案是否定的，这意味着我没有正确配置表单，因此，是否有任何资源可以帮助解决该问题？

这是我的contact-form:index.js 配置文件：

var async = require('async');

module.exports = {
  extend: 'apostrophe-pieces',
  name: 'contact-form',
  label: 'Contact Form',
  alias: 'contactForm',
  addFields: [
    {
      name: 'name',
      type: 'string',
      label: 'First & Last Name',
      required: true
    },
    {
      name: 'company',
      type: 'string',
      label: 'Company Name',
      required: true
    },
    {
      name: 'email',
      type: 'string',
      label: 'Email Address',
      required: true
    },
    {
      name: 'phone',
      type: 'string',
      label: 'Phone Number & Extension',
      required: true
    },
    {
      name: 'subject',
      type: 'string',
      label: 'Subject',
      required: true
    },
    {
      name: 'message',
      type: 'string',
      label: 'Message',
      textarea: true,
      placeholder: "Don't be stupid"
    }
  ],
  permissionsFields: false,

  afterConstruct: function(self) {
    self.setSubmitSchema();
  },

  construct: function(self, options) {

    self.setSubmitSchema = function() {
      self.submitSchema = self.apos.schemas.subset(self.schema,
        [ 'name', 'company', 'email', 'phone', 'subject', 'message' ]
      );
    };

    self.submit = function(req, callback) {
      var piece = {};
      return async.series([
        convert,
        insert
      ], callback);
      function convert(callback) {
        return self.apos.schemas.convert(req, self.schema, 'form', req.body, piece, callback);
      }
      function insert(callback) {
        return self.insert(req, piece, { permissions: false }, callback);
      }
    };

  }
};

【问题讨论】：

这可能是由于自定义字段配置中的错误，所以请分享该代码。毫无疑问，我们需要更多细致入微和友好的错误消息。
我添加了自定义字段配置。
@botell 有什么想法吗？错误来自 apos-schema 模块，在这里失败：if (field.required && !data[name].length) 在一个名为 convertString 的函数中。正在转换什么字符串？看来，我正在正确命名我的所有表单字段。我不明白数据[名称应该是什么。
另外，如果点击表单内的任何按钮，表单会提交吗？看来这就是行为，如果是这样，那似乎非常突兀。我认为在不提交表单的表单标签内有按钮是合理的。如何修复它以便表单仅在单击提交按钮时提交？
你能在我们的沙盒项目或我可以安装的另一个项目的分支中重现这个吗？我很乐意看看，到目前为止我的环境中还没有看到这个问题。

标签： node.js apostrophe-cms

【解决方案1】：

我是 P'unk Avenue 的 Apostrophe 的首席开发人员。我们在另一个论坛上进行了一些对话，但为了记录，结果发现有两个问题：

表单在任何按钮单击时提交，因为这是按钮元素在类型为“提交”时所做的事情，并且“提交”是类型的默认值（至少在某些浏览器中）。这不是撇号问题，可以通过根据需要设置 type 属性来解决。
表单标记是自定义的，在实际表单字段元素周围没有 data-name="title" 等包装元素（对应于架构）。您可以使用自定义标记，但在我们的官方schemaMacros.html 中找到的所有“移动部分”都需要存在，即数据属性需要存在。

我们确实计划在没有这些包装器的情况下更容易使用自定义标记，至少在我们可以确定哪些字段没有它们的情况下是这样。

仅供参考，type="file" 的元素不会开箱即用，但请查看撇号架构中的附件字段类型，这对于该角色来说非常了不起。

【讨论】：