Polymer paper-tags-input未加入表单：POST请求如何提交数组字段？

我之前也碰到过一模一样的情况，iron-form默认只会自动收集原生表单元素，或者实现了IronFormElementBehavior的自定义组件的数据。paper-tags-input大概率没实现这个行为，所以才会被表单直接忽略。这里有两个实用的解决办法：

方法一：表单提交前手动注入标签数据 #

利用iron-form的iron-form-presubmit事件，在表单正式提交前，把paper-tags-input的值手动加到提交数据里。

首先给你的iron-form添加事件监听：

<iron-form id="myForm" on-iron-form-response="_formResponse" on-iron-form-presubmit="_handlePresubmit">

然后在组件的脚本里添加处理函数：

_handlePresubmit(event) {
  // 找到页面中的paper-tags-input元素
  const tagsInput = this.shadowRoot.querySelector('paper-tags-input[name="tags"]');
  // 获取选中的标签数组（paper-tags-input的value属性就是标签数组）
  const tags = tagsInput.value;
  // 因为你的表单enctype是application/json，直接把tags加到请求体对象里即可
  event.detail.request.body.tags = tags;
}

这样提交的时候，tags数组就会被正常包含在POST的JSON数据里了。

方法二：让paper-tags-input支持IronFormElementBehavior #

如果你有权限修改paper-tags-input的代码（或者这是你自己封装的组件），可以让它实现IronFormElementBehavior，这样iron-form就能自动识别并收集它的值，不用再写额外的处理逻辑。

修改组件的代码如下：

class PaperTagsInput extends Polymer.Element {
  static get is() { return 'paper-tags-input'; }
  
  // 添加IronFormElementBehavior，让组件被iron-form识别
  static get behaviors() {
    return [Polymer.IronFormElementBehavior];
  }

  static get properties() {
    return {
      // 确保name属性存在，用于对应表单字段名
      name: {
        type: String,
        reflectToAttribute: true
      },
      // value属性存储标签数组，作为表单提交的值
      value: {
        type: Array,
        value: () => [],
        notify: true
      }
    };
  }
}

customElements.define(PaperTagsInput.is, PaperTagsInput);

修改后，不需要额外的事件处理，iron-form会自动把tags字段包含在提交数据里，更符合Polymer表单的规范。

两种方法里，方法一适合快速解决现有问题，不用改动组件源码；方法二更适合长期维护，让组件的表单兼容性更好。

内容的提问来源于stack exchange，提问作者arun