聚合物:表格不发送纸输入值,所需的属性不起作用



我有以下组件:

<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>

有两个问题:

  1. 当我单击提交按钮和所需输入时,提交表单是空的。
  2. 提交表格时什么也不会发送。

发生了什么事?

来自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>

最新更新