Eisen-Form addEventListener von null

Question

in Bezug auf eine bereits gestellte Frage here

Aber diese Frage wurde nie beantwortet.

Ich versuche zu addEventListener auf einer Eisen-Form wie:

meine HTML-Importe:

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

die Form:

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

und der Zuhörer:

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

    }); 

Aber das wird mir den Fehler als gut -

Uncaught TypeError: Cannot read property 'addEventListener' of null

ich einige Vorschläge mit window.onload oder WebComponentsReady bereits versucht. Nichts half.

Answer 1

Vielleicht du verpasst} oder Bower installieren

Answer 2

ich die Lösung gefunden:

i definiert die addEventListener am falschen Ort, und es muss mit dem shadowRoot im connectedCallback() sein.

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; 
      }); 
     }