我有以下组件:
<link rel="import" href="./bower_components/polymer/polymer-element.html">
<link rel="import" href="./bower_components/paper-input/paper-input.html">
<link rel="import" href="./bower_components/iron-form/iron-form.html">
<dom-module id="my-form">
<template>
<b>Test</b>
<form is="iron-form" id="form" method="post" action="/save">
<paper-input name="name" value=""></paper-input>
<button type="submit">submit!</button>
</form>
</template>
<script>
/**
* @customElement
* @polymer
*/
class MyForm extends Polymer.Element {
static get is() { return 'my-form'; }
static get properties() {
return { };
}
}
window.customElements.define(MyForm.is, MyForm);
</script>
</dom-module>
有两个问题:
- 当我单击提交按钮和所需输入时,提交表单是空的。
- 提交表格时什么也不会发送。
发生了什么事?
来自2.0中的新事物:
此外,尽管它们在规范中得到支持,但Polymer 2.0当前不支持类型扩展元素(
is=
(。
这是您的代码不起作用的主要原因。is
属性不再支持。
当前使用is
的解决方法是:
// Before 2.0
<form /.../ is="iron-form"></form>
// After 2.0
<iron-form>
<form /.../></form>
</iron-form>
您的代码应该看起来像这样:
<link rel="import" href="./bower_components/polymer/polymer-element.html">
<link rel="import" href="./bower_components/paper-input/paper-input.html">
<link rel="import" href="./bower_components/iron-form/iron-form.html">
<dom-module id="my-form">
<template>
<b>Test</b>
<iron-form>
<form id="form" method="post" action="/save">
<paper-input name="name" value=""></paper-input>
<button type="submit">submit!</button>
</form>
</iron-form>
</template>
<script>
/**
* @customElement
* @polymer
*/
class MyForm extends Polymer.Element {
static get is() { return 'my-form'; }
static get properties() {
return { };
}
}
window.customElements.define(MyForm.is, MyForm);
</script>
</dom-module>