1

问题

我想在 Polymer 3 中提交一个铁表格。我使用一个纸质按钮，表格必须通过铁 ajax 提交。

这是我的view.js

import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
import './shared-styles.js';

class Foo extends PolymerElement {
    static get template() {
        return html'
            <iron-form>
                <form id="formOne" method="post" action="https://my-api-url.com" is="iron-form">
                    <paper-input name="input-1" placeholder="Input One"></paper-input>
                    <paper-button on-tap="submitHandler">Submit</paper-button>
                </form>
            </iron-form>
        ';
    }

    submitHandler() {
        this.$.formOne.generateRequest();
    }
}
window.customElements.define('foo', Foo);

单击纸张按钮时未提交我的表单。

我试过的

  • 我手动创建了一个 iron-ajax 元素并使用 generateRequest(). 那行得通。
  • 我在submitHandler函数中设置了警报。显示出来了。
  • 我尝试使用 提交表单this.$.formOne.submit()。这也奏效了。当然，表单不是通过 ajax 提交的，而是打开了 api 页面。
  • 我创建了一个正常<button>的提交表单。这可行，也可以通过 ajax 发送表单，但我想使用纸质按钮。

非常感谢任何帮助。谢谢！

4

1 回答 1

0

我尝试使用 提交表单this.$.formOne.submit()。这也奏效了。当然，表单不是通过 ajax 提交的，而是打开了 api 页面。

问题是您错误地调用（执行native<form>.submit()的同步方法）而不是. 要解决此问题，请将 ID 移至，这将执行预期的异步方法：submit<form><iron-form>.submit()<iron-form>submit

<iron-form id="formOne">
  <!-- <form id="formOne"> --> <!-- DON'T DO THIS -->
  <form>...</form>
</iron-form>

演示

于 2018-09-23T23:54:18.877 回答