Polymer paper-tags-input not added to form

Question

Trying to include an array field in a POST request with paper-tags-input.

The form is set up as follows:

<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>

While paper-input field named owner is included in the request payload, there is nothing getting added for tags in the request payload.

How to get the values in the tags array field included in the POST request payload?

If the above is not possible, then I think an alternative solution would be to declare a new property called tags_list and set it as the tags attribute for paper-tags-input, like:

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

Then I see the values are available in this.tags_list, which I can access in the submit() function. How can I add that to myForm before I do the submit?

Answer 1

Figured out how to do this with the second approach.

Took hint from: Modify iron-form JSON before submitting

Added a presubmit to iron form like this:

<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>

Actually this approach is what I might need, since I need to modify the array values and keep each value as an object anyway.