CODEWITHSUNDEEP
polymer
Iskalla
Iskalla

Reputation: 381

Set empty attribute to polymer component inside another one

I've been trying to set an empty attribute to a polymer element inside another one.

This is the code for my custom element. What I'm trying to do is set "required" to the input element whenever custom-core-input's attribute required is true.

<polymer-element name="custom-core-input" attributes="columnId inputError validation required">
<template>
    <section>
        <paper-input-decorator id="decorator" error="{{inputError}}">
            <input id="custominput" is="core-input" validate="{{validation}}" on-change="{{inputCommited}}">
        </paper-input-decorator>
    </section>
</template>
<script>
    Polymer({
        inputCommited: function () {
            this.$.decorator.isInvalid = !this.$.custominput.validity.valid;
        }
    });
</script>

So far I've tried accessing the input element and set 'attr' from the script, I thought it wouldn't work, but was worth the try. I just have no idea about how to approach this, I feel like there must be an easy answer but cant think of it.

Also (and unrelated), I think I'm doing something else wrong, since the paper-input-decorator won't 'take' the inputError value.

Thanks for reading :)

Upvotes: 1

Views: 487

Answers (2)

Dirk Grappendorf
Dirk Grappendorf

Reputation: 3422

Required is a conditional attribute, so you can set it on the input element like so:

<polymer-element name="custom-core-input" 
      attributes="columnId inputError validation required">
  <template>
    <section>
      <paper-input-decorator id="decorator"
            error="{{inputError}}"
            autovalidate>
        <input id="custominput" is="core-input"
              validate="{{validation}}"
              on-change="{{inputCommited}}"
              required?="{{required}}">
      </paper-input-decorator>
    </section>
  </template>
  <script>
    Polymer('custom-core-input', {
      required: false
    });
  </script>
</polymer-element>

Note that the required attribute of custom-core-input must be initialized to false (or true, depending on your defaults).

The error message is only displayed if the input is invalid. So one option is to set the autovalidate attribute. Set required and inputError on your custom-core-input and you will see the error message on page load. More generally you want to set isInvalid to true or false depending on the current input validity.

Upvotes: 2

Goce Ribeski
Goce Ribeski

Reputation: 1372

Here is one way to do it, in the element prototype:

<script>
        Polymer({
            ready: function () {
                //check the "custom-core-input" required attribute:
                if (this.required)
                    //select the input element by Id, and set Required attr to True:
                    this.$.custominput.required = true;
            }
        });
</script>

Upvotes: 1

Related Questions