使 paper-menu/paper-dropdown-menu 成为 html 表单提交所必需的

Question

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

编辑：

我想是纸质下拉菜单需要具有所需的属性，而不是纸质菜单。所需的行为类似于 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>

Answer 1

您可能正在使用 ajax-form, which depends on an obsolete version (pre 1.0) of Polymer that isn't compatible with the newest version (1.5.0). You should actually switch to Polymer's 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

使 paper-menu/paper-dropdown-menu 成为 html 表单提交所必需的

Make paper-menu/paper-dropdown-menu required for html form submission

required

polymer

paper-elements