制作 html 表单提交所需的 paper-menu/paper-dropdown-menu答案

【问题标题】：Make paper-menu/paper-dropdown-menu required for html form submission制作 html 表单提交所需的 paper-menu/paper-dropdown-menu
【发布时间】：2016-06-13 08:21:48
【问题描述】：

如何制作表单提交所需的纸质菜单元素？我有一个自定义元素，其中包含几个聚合物元素。常规的纸张输入在它们为空时会阻止表单提交，但纸张菜单不会。

编辑：

我想是纸质下拉菜单需要具有必需的属性，而不是纸质菜单。所需的行为类似于 html 表单中所需的 Select 标记的正常行为方式。

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

<dom-module id="rsvp-form">
  <template>
    <style include="shared-styles"></style>
    <style>
      :host {
        display: block;
      }
    </style>
    <form is="ajax-form" id="rsvp" method='post' action='/api/rsvps'>
      <h2 class="page-title">RSVP</h2>
      <div class='layout horizontal wrap'>
        <paper-input label='First Name' class='flex' value='{{firstName}}' name="firstName" required></paper-input>
        <paper-input label='Last Name' class='flex' value='{{lastName}}' name="lastName" required></paper-input>
      </div>
      <div class='layout horizontal flex'>
        <paper-dropdown-menu label="Attendance" class='flex' name="attendance" required>
          <paper-menu class="dropdown-content" selected='{{selectedIndex}}' required>
            <paper-item>I would love to attend!</paper-item>
            <paper-item>I cannot attend.</paper-item>
          </paper-menu>
        </paper-dropdown-menu>
      </div>
      <paper-button id="submitButton" on-tap='submitRsvp' raised>Submit</paper-button>
    </form>
  </template>

  <script>
    (function() {
      'use strict';

      Polymer({
        is: 'rsvp-form',

        properties: {
          selectedIndex: {
            type: Number,
            observer: '_selectedIndexChanged'
          },
          firstName: {
            type: String,
            value: ''
          },
          lastName: {
            type: String,
            value: ''
          },
          attendance: {
            type: String,
            value: ''
          }
        },
        _selectedIndexChanged: function(newIndex) {
          if (newIndex === 0) {
            this.absent = false;
          } else if (newIndex === 1) {
            this.absent = true;
          }
          this.attending = !this.absent;
        },
        submitRsvp: function(e) {
          Polymer.dom(e).localTarget.parentElement.submit();
        }

      });

      document.addEventListener('WebComponentsReady', function() {
        var form = document.getElementById("rsvp");

        //modify existing or add new datapoints to be submitted here
        form.addEventListener('submitting', function(event) {

        });
      });

    })();
  </script>

</dom-module>

【问题讨论】：

标签： polymer required paper-elements

【解决方案1】：

您可能正在使用ajax-form，这取决于与最新版本 (1.5.0) 不兼容的 Polymer 的过时版本（1.0 之前）。您实际上应该切换到 Polymer 的 iron-form，它似乎提供与 ajax-form 相同的功能。

iron-form 应该允许您现有的代码按预期工作（即，需要paper-dropdown-menu 选择）。等效于ajax-form 的submitting 事件是iron-form 的iron-form-presubmit 事件。

这是您可以在iron-form 表单上收听的各种事件的演示：

<head>
  <base href="https://polygit.org/polymer+1.5.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="paper-dropdown-menu/paper-dropdown-menu.html">
  <link rel="import" href="paper-menu/paper-menu.html">
  <link rel="import" href="paper-item/paper-item.html">
  <link rel="import" href="paper-input/paper-input.html">
  <link rel="import" href="paper-button/paper-button.html">
  <link rel="import" href="iron-form/iron-form.html"> 
</head>
<body>
  <rsvp-form></rsvp-form>

  <dom-module id="rsvp-form">
    <template>
      <form is="iron-form" id="rsvp" method="post" action="/api/rsvps">
        <h2 class="page-title">RSVP</h2>
        <div class='layout horizontal wrap'>
          <paper-input label='First Name' class='flex' value='{{firstName}}' name="firstName" required></paper-input>
          <paper-input label='Last Name' class='flex' value='{{lastName}}' name="lastName" required></paper-input>
        </div>
        <div class='layout horizontal flex'>
          <paper-dropdown-menu label="Attendance" class='flex' name="attendance" required>
            <paper-menu class="dropdown-content" selected='{{selectedIndex}}'>
              <paper-item>I would love to attend!</paper-item>
              <paper-item>I cannot attend.</paper-item>
            </paper-menu>
          </paper-dropdown-menu>
        </div>
        <paper-button id="submitButton" on-tap="submitRsvp" raised>Submit</paper-button>
      </form>
    </template>
    <script>
      HTMLImports.whenReady(function() {
        Polymer({
          is: 'rsvp-form',

          properties: {
            selectedIndex: {
              type: Number,
              observer: '_selectedIndexChanged'
            },
            firstName: {
              type: String,
              value: ''
            },
            lastName: {
              type: String,
              value: ''
            },
            attendance: {
              type: String,
              value: ''
            }
          },

          listeners: {
            'rsvp.iron-form-presubmit': '_presubmit',
            'rsvp.iron-form-submit': '_submit',
            'rsvp.iron-form-error': '_error',
            'rsvp.iron-form-invalid': '_invalid',
          },

          _selectedIndexChanged: function(newIndex) {
            if (newIndex === 0) {
              this.absent = false;
            } else if (newIndex === 1) {
              this.absent = true;
            }
            this.attending = !this.absent;
          },

          submitRsvp: function(e) {
            this.$.rsvp.submit();
          },

          _presubmit: function() {
            // you could modify data here before it's sent
            console.log('presubmit request', this.$.rsvp.request);
          },
          _submit: function() {
            // data successfully submitted
            console.log('submitted request', this.$.rsvp.request);
          },
          _error: function(e) {
            // data failed to submit
            console.log('submitted failed', this.$.rsvp.request, e.detail);
          },
          _invalid: function() {
            // form input is invalid
            console.log('input invalid (not submitted)');
          }
          
        });
      });
    </script>
  </dom-module>
</body>

^codepen

【讨论】：

非常感谢您提到 ajax-form 已过时。当我试图让表单提交工作时，我所看到的一切都表明 ajax-form 比 Iron-form 好得多，所以我就是这样做的，但似乎不再正确。
没问题。 :) 你在哪里看到 ajax-form 比 iron-form 好？
"Better" 可能夸大了它，但我遇到了与此类似的问题 [stackoverflow.com/questions/24461460/polymer-form-post-data] 在提交期间数据未通过。似乎 Polymer 博客在某一时刻也以 ajax-form 为特色 [stackoverflow.com/questions/24952217/… 所以我认为这没问题。