iron-form 2.0 in Polymer 2 element: function not defined

Question

Trying to replicate on of the iron-form demos from https://www.webcomponents.org/element/PolymerElements/iron-form/demo/demo/index.html inside a Polymer 2 element, and just can't seem to get it working.

When clicking Submit, I get Uncaught ReferenceError: _delayedSubmit is not defined. Any suggestions?

JSBin: https://jsbin.com/pinasum/edit?html,console,output

Code:

<dom-module id="spp-login">
    <template>
        <iron-form id="loginForm">
            <form action="/login" method="post">
                <paper-input name="username" label="Username" required auto-validate></paper-input>
                <paper-input name="password" label="Password" required auto-validate></paper-input>

                <paper-button raised onclick="_delayedSubmit(event);" disabled id="loginFormSubmit">
                    <paper-spinner id="spinner" hidden></paper-spinner>
                    Submit
                </paper-button>
                <paper-button raised onclick="loginForm.reset();">Reset</paper-button>
            </form>
            <div class="output"></div>
        </iron-form>
    </template>

    <script>
      class SppLogin extends Polymer.Element {

        static get is() {
          return 'spp-login';
        }

        static get properties() {
          return {
            username: String,
            password: String,
          };
        }

        connectedCallback() {
          super.connectedCallback();
          const loginForm = this.$.loginForm;
          const spinner = this.$.spinner;
          const loginFormSubmit = this.$.loginFormSubmit;

          loginForm.addEventListener('iron-form-submit', (event) => {
            this.querySelector('.output').innerHTML = JSON.stringify(event.detail);
            spinner.active = false;
            spinner.hidden = true;
            loginFormSubmit.disabled = false;
          });
          loginForm.addEventListener('change', (event) => {
            loginFormSubmit.disabled = !loginForm.validate();
          });

          loginForm.addEventListener('iron-form-presubmit', (event) => {
            event.preventDefault();
            console.log('here');
          });
        }

        _delayedSubmit(event) {
          const loginForm = this.$.loginForm;
          const spinner = this.$.spinner;
          spinner.active = true;
          spinner.hidden = false;
          loginForm.disabled = true;
          // Simulate a slow server response.
          setTimeout(function() {
            loginForm.submit();
          }, 1000);
        }
      }

      window.customElements.define(SppLogin.is, SppLogin);
    </script>
</dom-module>

Answer 1

To add event listeners to DOM elements, you have to use on-event annotations in your template. Also, whether you provide a name for the event object or not, the event object is already being passed to your callback. Polymer doesn't support passing arguments in the event attributes.

The examples shown in the iron-form demo page is using demo-snippet, that works both for native elements as well as polymer elements.

So, you need to change your code from: onclick="_delayedSubmit(event);" to: on-click="_delayedSubmit".

Answer 2

when triggering an event with paper button you have to use on-click and you can't specify the parameters.

So the correct syntax would be on-click="_delayedSubmit"