时间戳

首页 > 解决方案 > 聚合物纸标签输入未添加到表单

polymer - 聚合物纸标签输入未添加到表单

问题描述

尝试使用paper-tags-input在 POST 请求中包含一个数组字段。

表格设置如下：

<paper-dialog id="dialog" modal class="size-position">
<iron-form id="myForm" on-iron-form-response="_formResponse">
  <form method="post" enctype="application/json" action="http://127.0.0.1:8080/items">

    <paper-input name="owner" label="Owner"></paper-input>

    <paper-tags-input name="tags" label="Tag(s)" duplicate-error-message="Duplicate">
    </paper-tags-input>

    <div class="buttons">
        <paper-button raised dialog-dismiss class="cancel">
            Cancel
        </paper-button>
        <paper-button raised dialog-confirm autofocus on-tap="_submit" class="submit">
            Submit
        </paper-button>
    </div>

  </form>
</iron-form>
</paper-dialog>
...
<script>
    ...
    _submit() {
        this.$.myForm.submit();
    }
</script>

虽然paper-input命名字段owner包含在请求有效负载中，但请求有效负载中没有添加任何内容tags。

如何获取tagsPOST 请求有效负载中包含的数组字段中的值？

如果上述方法不可行，那么我认为另一种解决方案是声明一个名为的新属性tags_list并将其设置为 的tags属性paper-tags-input，例如：

<paper-tags-input name="tags" 
        label="Tag(s)" 
        duplicate-error-message="Duplicate"
        tags="{{tags_list}}">
</paper-tags-input>

然后我看到这些值在 中可用this.tags_list，我可以在submit()函数中访问这些值。在提交之前如何添加它myForm？

标签： polymerpolymer-2.x

解决方案

想出了如何用第二种方法做到这一点。

提示来自：在提交之前修改 Iron-form JSON

像这样向铁形式添加了预提交：

<iron-form id="myForm" 
    on-iron-form-presubmit="_preSubmit" 
    on-iron-form-response="_formResponse">
...
<script>
  _preSubmit() {
      var body = this.$.myForm.request.body;
      body['tags'] = [];
      this.tags_list.forEach(function(tag) {
          body['tags'].push({"name": tag});
      });
  }
</script>

实际上这种方法是我可能需要的，因为我需要修改数组值并将每个值保留为一个对象。

推荐阅读