CODEWITHSUNDEEP
javascriptpolymerpolymer-1.0
DoK
DoK

Reputation: 871

Toggle disabled attribute of paper-button

I have a paper-button (send button) which is related to multiple paper-input fields/element. The paper-input button should be disabled as long as the user fills out all related paper-input fields/elements (newEmail and passwd).

This is the important part of the element

  <gold-email-input id="newEmail"
                    label="Email"
                    no-label-float required>
  </gold-email-input>

  <paper-input id="passwd"
               type="password"
               label="Password"
               no-label-float required>
  </paper-input>

  <div class="buttons">
    <paper-button dialog-dismiss>Cancel</paper-button>
    <paper-button dialog-confirm autofocus
                  disabled$="[[isInputEmpty($$.newEmail.value, $$.passwd.value)]]"
                  on-tap="changeEmail"
                  class="default">Save</paper-button>
  </div>

The function disabled$="[[isInputEmpty($$.newEmail.value, $$.passwd.value)]]" won't be called when the newEmail.value or passdw.value change.

This is the JavaScript part:

  isInputEmpty (email, pass) {
    if (email.length === 0 || pass.length === 0) return true;
    return false;
  }

What's the correct implementation to toggle the attribute disabled between true and false?

Upvotes: 2

Views: 4080

Answers (1)

tony19
tony19

Reputation: 138696

  1. disabled is actually a property of <paper-button> (not an attribute), so you should not be using the attribute-binding syntax (i.e., $=).

    <!-- don't do this -->
<!--
<paper-button disabled$="[[isInputEmpty(...)]]">
-->

<paper-button disabled="[[isInputEmpty(...)]]">

  2. You're attempting to pass the values of newEmail and passwd in your binding, but you're not using the correct syntax. You'll have to bind the values from those inputs into properties that you would pass as arguments in your computed binding:

    <gold-email-input value="{{email}}"></gold-email-input>
<paper-input value="{{password}}"></paper-input>
<paper-button disabled="[[isInputEmpty(email, password)]]"></paper-button>

Upvotes: 3

Related Questions