null 的铁形式 addEventListener答案

【问题标题】：iron-form addEventListener of nullnull 的铁形式 addEventListener
【发布时间】：2017-06-16 19:56:12
【问题描述】：

关于一个已经提出的问题here

但这个问题从未得到回答。

我正在尝试将EventListener 添加到像这样的铁形上：

我的 HTML 导入：

<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/bower_components/iron-ajax/iron-ajax.html">

<link rel="import" href="/bower_components/iron-form/iron-form.html">
<link rel="import" href="/bower_components/paper-input/paper-input.html">
<link rel="import" href="/bower_components/paper-button/paper-button.html">
<link rel="import" href="/bower_components/paper-spinner/paper-spinner.html">

形式：

<form is="iron-form" method="get" action="/" id="eventsDemo">
        <paper-input name="name" label="Name" required auto-validate></paper-input>
        <paper-input name="password" label="Password" type="password" required auto-validate></paper-input>
        <paper-checkbox name="read" required>You must check this box</paper-checkbox>
        <br>
        <paper-button raised onclick="_delayedSubmit(event)" disabled id="eventsDemoSubmit">
            <paper-spinner id="spinner" hidden></paper-spinner>
            Submit
        </paper-button>
        <paper-button raised onclick="_reset(event)">Reset</paper-button>
        <div class="output"></div>
    </form>

和听众：

document.getElementById('eventsDemo').addEventListener('iron-form-submit', function (event) {

    });

但这也让我犯了错误 -

未捕获的类型错误：无法读取 null 的属性“addEventListener”

我已经尝试了一些有关 window.onload 或 WebComponentsReady 的建议。没有任何帮助。

【问题讨论】：

如果这是聚合物 2.0，你应该试试this.shadowRoot.getElementById('eventsDemo')
是的，这是 Polymer2，谢谢，我在类构造函数中尝试了这个，控制台说无法读取 null 的属性 getElementById。好像 this.shadowRoot 没有设置。

标签： javascript polymer web-component google-web-component iron-form

【解决方案1】：

也许您缺少 } 或 bower 安装

【讨论】：

【解决方案2】：

我找到了解决办法：

我在错误的地方定义了addEventListener，它需要与connectedCallback()中的shadowRoot一起使用。

 class UserApp extends Polymer.Element {
        static get is() {
            return 'user-app';
        }

        connectedCallback() {
            super.connectedCallback();

            let eventsDemo = this.shadowRoot.getElementById('eventsDemo');
            let eventsDemoSubmit = this.shadowRoot.getElementById('eventsDemoSubmit');

            eventsDemo.addEventListener('iron-form-submit', function (event) {
                console.log("iron form submit");

                eventsDemoSubmit.disabled = false;
                this.querySelector('.output').innerHTML = JSON.stringify(event.detail);
            });

            eventsDemo.addEventListener('change', function (event) {

                eventsDemoSubmit.disabled = !eventsDemo.validate;
            });
        }

【讨论】：