如何从 iron-form 获取表单数据以在视图中输出

Question

我是 Polymer 2 和 ES6 的新手。我可以console.log输入铁形式的数据。但是，我无法将其输出到屏幕上。我认为这条线可以实现目标：

this.querySelector('.output').innerHTML = JSON.stringify(this.$.pizzaOrder.favoritePizza);

但是，这给了我错误：Uncaught TypeError: Cannot set 属性 'innerHTML' of null。这是我的自定义元素的完整代码，my-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">
<link rel="import" href="bower_components/paper-checkbox/paper-checkbox.html">
<link rel="import" href="bower_components/paper-button/paper-button.html">

<dom-module id="my-form">
    <template>
        <iron-form id="pizzaOrder">
            <form action="/foo" method="get">
                Topping?
                <input type="text" id="favoritePizza" name="favoritePizza" value="favoritePizza" required></input>
                <br> Extra cheese?
                <input type="checkbox" id="cheese" name="cheese" value="cheese" checked></input>
                <br> Size?
                    <input type="radio" id="small" name="size" value="small"> Small </input>
                    <br>
                    <input type="radio" id="medium" name="size" value="medium"> Medium </input>
                    <br>
                    <input type="radio" id="large" name="size" value="large" checked> Large </input>
                <br>
                Delivery <paper-checkbox id="delivery" name="delivery" checked></paper-checkbox>
                <!--When you click, 'this.' is added to what you set equal to on-click-->
                <paper-button raised on-click="_submitForm">Submit</paper-button>
            </form>
        </iron-form>
        <h4>Your pizza is as follows:</h4>
        <div class="output"></div>
    </template>
    <script>
        /**
         * `sample-polymer`
         * sample
         *
         * @customElement
         * @polymer
         * @demo demo/index.html
         */
        class MyForm extends Polymer.Element {
            static get is() { return 'my-form'; }
            static get properties() {
                return {
                    favoritePizza: {
                        type: String,
                        notify: true
                    },
                    cheese: {
                        type: Boolean,
                        notify: true
                    },
                    size: {
                        type: String,
                        notify: true
                    },
                    delivery: {
                        type: Boolean,
                        notify: true
                    },
                    response: {
                        type: Object
                    },
                    pizzaOrder: {
                        type: Object
                    }
                };
            }
            _handleInput(event) {
            }
            _submitForm(event) {
                console.log("Form submitted");
                console.log(this.$.pizzaOrder.serializeForm());
                this.querySelector('.output').innerHTML = JSON.stringify(this.$.pizzaOrder.favoritePizza);
            }
        }
        window.customElements.define(MyForm.is, MyForm);
    </script>
</dom-module>`

Answer 1

从您的 <form> 标签中删除 action="/foo" method="get"。然后 console.log(this.$.pizzaOrder.serializeForm()); 打印您的对象（您不需要第二个控制台）。使用 <iron-ajax> 元素提交表单。

看到这支笔：https://codepen.io/johnthad/pen/ddjPeZ?editors=1001

如何从 iron-form 获取表单数据以在视图中输出

How do I get form data from iron-form to be output in view

polymer

google-web-component

polymer-2.x

iron-form

polymer-2.0