0

我正在按照本教程在我的项目中创建一个表单，该表单利用了 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);
      }
    };

  }
};
4

1 回答 1

0

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

  1. 表单在任何按钮单击时提交，因为这是按钮元素在类型为“提交”时所做的事情，并且“提交”是类型的默认值（至少在某些浏览器中）。这不是撇号问题，可以通过根据需要设置 type 属性来解决。

  2. 表单标记是自定义的，并且在实际表单字段元素周围没有包装元素，例如data-name="title"等（对应于模式）。您可以使用自定义标记，但我们官方中找到的所有“活动部分”都schemaMacros.html需要存在，即数据属性需要存在。

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

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

于 2017-01-24T20:39:01.603 回答