切换禁用纸张按钮的属性

Question

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 ?

Answer 1

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

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