Question

我正在开发基于聚合物的前端项目。我对这种东西很陌生，我正在努力寻找我需要的组件信息和工作示例。我知道有这些组件的演示展示，但他们没有给我我需要的东西。

  <iron-form id="formForm">
      <form>
        <paper-autocomplete label="Country" required error-message="This field is required"></paper-autocomplete>
      </form>
  </iron-form>

当我在<iron-form>中使用paper-autocomplete元素并向其添加必需属性时，<iron-form>会调用 paper-autocomplete 验证程序。但是当我创建自己的聚合物元素时，只包含了 paper-autocomplete ，当我将其包含在里面时，铁形态看不到它。

我的定制聚合物元素

<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/paper-autocomplete/paper-autocomplete.html">
<link rel="import" href="../globals-behavior.html">

<dom-module id="autocomplete-country">
  <template>
    <iron-ajax id="countryFindCall"
        url="{{restUri}}/classifier/country/find"
        params="{{query}}"
        on-response="handleResponse"
        debounce-duration="300"></iron-ajax>

    <paper-autocomplete label="Country" id="country-autocomplete" remote-source="true" min-length="2"
        text-property="label" value-property="value" disable-show-clear="true"></paper-autocomplete>
  </template>

  <script>
    Polymer({
      is: "autocomplete-country",

      behaviors: [
        GlobalsBehavior
      ],

      properties: {
        item: {
          notify: true
        },

        query: {
          type: Object
        },

        result: {
          type: Object
        },

        selected: {
          type: Object,
          value: {}
        }
      },

      attached: function() {...},
      handleResponse: function (data) {...},
      onSelect: function(event) {...},
      onChange: function(event) {...},
      onBlur: function() {...} 
    });
  </script>
</dom-module>

这就是我包括它的方式

  <iron-form id="formForm">
      <form>
        <autocomplete-country item="{{request.country}}" required error-message="Field is required"></autocomplete-country>
      </form>
  </iron-form>

Answer 1

取自铁形文件：
<iron-form>是一个HTML <form>元素，可以验证并提交实现Polymer.IronFormElementBehavior的所有自定义元素。
所以我想你的元素应该实现，你很高兴。

Answer 2

通过添加新参数必需并将其添加为属性来解决此问题：

<paper-autocomplete ... required$="[[required]]" ... ></paper-autocomplete>

纸张自动完成验证无效

2 个答案: