試圖從聚合物2元素中的https://www.webcomponents.org/element/PolymerElements/iron-form/demo/demo/index.html中複製鐵形式的演示,並且似乎無法使其工作。聚合物2元素中的鐵形式2.0:未定義功能
點擊提交時,我得到Uncaught ReferenceError: _delayedSubmit is not defined
。有什麼建議麼?
JSBin:https://jsbin.com/pinasum/edit?html,console,output
代碼:
<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>
在下面的幫助下,我已經更正了代碼,按照原樣進行操作。上面的代碼中還有其他錯誤。固定代碼在這裏:https://jsbin.com/dobayax/1/edit?html,console,output – ModernDeveloperLLC