Polymer 2.0 iron-form response trigger dom-if

Question

How do I use the response data from iron-form to trigger the dom-if template? I want to show the template if there was data was returned. This code is not working. What am I doing wrong here?

<link rel="import" href="../components/polymer/polymer-element.html">
<link rel="import" href="../components/polymer/lib/elements/dom-if.html">
<link rel="import" href="../components/iron-form/iron-form.html">

<dom-module id="a-tag">
  <template>
    <iron-form>
      <form action="/" method="get">
        <input name="test">
        <button></button>
      </form>
    </iron-form>

    <template class="iftemplate" is="dom-if" if="[[data]]">
      <p>HELLO</p>
    </template>
  </template>

  <script>
    class ATag extends Polymer.Element {
      static get is() {return 'a-tag'}
      ready() {
        super.ready()
        this.shadowRoot.querySelector('iron-form').addEventListener('iron-form-response', (event) => {
          this.shadowRoot.querySelector('.iftemplate').data = event.detail.response
        })
      }
    }
    customElements.define(ATag.is, ATag)
  </script>
</dom-module>

vdegenne vdegenne · Accepted Answer · 2017-06-26T23:27:49

You are doing many wrong things here,

first I would advice to add an id to the form element iron-form so you can point easily in your Polymer element's code.

<iron-form id="my-form">
  ...
</iron-form>

and add the event listener like that :

this.$['my-form'].addEventListener('iron-form-response', ...);

Also you are trying to add a property data to the template dom-if I don't understand why. [[data]] references a property in your element's scope. You have to define this property in the correct section.

static get properties () {
  return {
    data: {
      type: String,
      value: ''
    }
  };
}

and in your event listener callback :

ready() {
  super.ready()

  this.$['my-form'].addEventListener('iron-form-response', (event) => {
    // this.data = event.detail.response;
    this.data = 'some data'; // for testing
  });
}

Polymer 2.0 iron-form response trigger dom-if

1 Answers