Polymer 2 iron-form提交失败：Cannot read property 'submit' of null

这问题我之前帮人排查过好几次，核心就是你的代码找不到<iron-form>元素才会报这个错。结合iron-form的特性，大概率是踩了这几个常见坑，你挨个检查下：

1. DOM还没加载完成就调用了submit #

Polymer类组件（包括iron-form）需要时间完成初始化和DOM渲染，如果你在页面刚启动就直接执行document.querySelector('iron-form').submit()，这时候元素还没挂载到DOM树里，自然返回null。

解决办法：

• 如果你在自定义Polymer元素内部操作，用组件的生命周期钩子（比如ready()）确保元素初始化完成：

  class YourCustomElement extends Polymer.Element {
    static get is() { return 'your-custom-element'; }
    ready() {
      super.ready();
      // 用this.$.id获取元素比querySelector更可靠
      this.$.myIronForm.submit();
    }
  }
  

• 如果是在页面全局脚本里，用Polymer.RenderStatus.afterNextRender()确保DOM渲染完成后再操作：

  Polymer.RenderStatus.afterNextRender(this, function() {
    const form = document.querySelector('iron-form');
    if (form) form.submit();
  });
  

2. 选择器错误，或元素在Shadow DOM中无法被普通选择器获取 #

• 如果你用标签选择器document.querySelector('iron-form')找不到元素，优先给iron-form加明确的ID（比如<iron-form id="myIronForm">），然后用document.getElementById('myIronForm')或者组件内部的this.$.myIronForm获取，精准度更高。
• 如果iron-form嵌套在另一个自定义元素的Shadow DOM里，普通的document.querySelector是访问不到的，得先拿到宿主元素，再通过shadowRoot访问：

  const hostElement = document.querySelector('your-host-element');
  const form = hostElement.shadowRoot.querySelector('iron-form');
  form.submit();
  

3. iron-form的结构不符合要求 #

iron-form要求内部必须直接包含一个原生<form>元素，结构错误会导致组件初始化失败，最终获取不到可用实例。检查你的结构是否符合规范：

<iron-form id="myIronForm">
  <!-- form必须是iron-form的直接子元素，不能嵌套在其他容器里 -->
  <form action="/your-submit-url" method="post">
    <paper-input name="username" label="Username"></paper-input>
    <button type="submit">提交</button>
  </form>
</iron-form>

4. 未正确引入iron-form依赖 #

如果忘了导入组件或者导入路径错误，元素根本没被注册到DOM中，自然找不到。检查你的导入语句：

<!-- HTML Imports方式 -->
<link rel="import" href="../iron-form/iron-form.html">

<!-- ES Modules方式 -->
import '@polymer/iron-form/iron-form.js';

同时确认依赖包（比如通过npm或Bower）已经正确安装。

调试小技巧 #

在调用submit前先打印获取到的元素，确认是否为null，还可以先序列化表单查看内容：

const form = document.querySelector('iron-form');
console.log('获取到的iron-form元素：', form);
if (form) {
  // 先查看表单序列化后的内容
  console.log('表单内容：', form.serializeForm());
  form.submit();
} else {
  console.error('找不到iron-form元素，请检查上述几项！');
}

内容的提问来源于stack exchange，提问作者R. Radio