Question

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

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

然而，这给了我错误：Uncaught TypeError：无法设置属性＆inner;内部HTML＆＃39;为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

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

请参阅此笔：https://codepen.io/johnthad/pen/ddjPeZ?editors=1001

如何从铁形式获取表单数据以便在视图中输出

1 个答案: