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，这取决于与最新版本（1.5.0）不兼容的Polymer的过时版本（1.0之前版本）。您应该切换到Polymer的iron-form，它似乎提供与ajax-form相同的功能。

iron-form应该允许您的现有代码按预期工作（即需要paper-dropdown-menu选择）。相当于ajax-form的{{1}}事件是submitting的{{3}}事件。

以下是您可以在iron-form表单上收听的各种活动的演示：

iron-form

^{iron-form-presubmit}

制作html表单提交所需的纸张菜单/纸张下拉菜单

1 个答案: