javascript - iron-form 2.0 in Polymer 2 element: function not defined -
trying replicate on of iron-form demos https://www.webcomponents.org/element/polymerelements/iron-form/demo/demo/index.html inside polymer 2 element, , can't seem working.
when clicking submit, uncaught referenceerror: _delayedsubmit not defined
. 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 is() { return 'spp-login'; } static 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 slow server response. settimeout(function() { loginform.submit(); }, 1000); } } window.customelements.define(spplogin.is, spplogin); </script> </dom-module>
to add event listeners dom elements, have use on-event annotations in template. also, whether provide name event
object or not, event
object being passed callback. polymer
doesn't support passing arguments in event attributes.
the examples shown in iron-form
demo page using demo-snippet
, works both native elements polymer elements.
so, need change code from: onclick="_delayedsubmit(event);"
to: on-click="_delayedsubmit"
.
Comments
Post a Comment