paper-autocomplete validation is not working

Question

I'm working on polymer based front-end project. I'm pretty new at this kind of stuff and I'm struggling finding info and working examples of components I need. I know there is demo showcases of those components but they don't give me what I need.

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

When I use paper-autocomplete element inside <iron-form>, and add required attribute to it, <iron-form> calls paper-autocomplete validator. But when I create my own polymer element which has only paper-autocomplete included, iron form doesn't see it when I include it inside.

There is my custom polymer element

<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>

And this is how I'm including it

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

Answer 1

Solved this problem by adding new parameter required and adding it as attribute :

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