Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Reset Polymer paper-input-container value and label

I'm having trouble resetting the label inside a paper-input-container after submitting a form. The form is a simple login form. If a user logs in, out, and back in again without a page refresh (from the browser), the label appears to be stuck as if there were a value in the input.

Here's an image to show the difference:

login forms

Here's the form inside the element:

<form is="iron-form">

    <paper-input-container id="email_container">
        <paper-input-error>E-mail or Password is incorrect</paper-input-error>
        <label>E-Mail Address</label>
        <input is="iron-input" id="email" on-blur="validateEmail" value="{{emailInput::input}}">
        </paper-input-container>

        <paper-input-container id="password_container">
            <label>Password</label>
            <input is="iron-input" id="password" type="password" value="{{passwordInput::input}}">
        </paper-input-container>

    <paper-button raised dialog-dismiss>Cancel</paper-button>
    <paper-button raised on-tap="handleCsrf">Login</paper-button>

</form>

These two approaches both get the form to the "after login" state the same:

//
this.emailInput = null;
this.passwordInput = null;

//
this.emailInput = "";
this.passwordInput = "";

I thought this would reset the entire container somehow, but it does nothing:

this.$.email_container = null;
this.$.password_container = null;
like image 276
anthony Avatar asked Jun 17 '15 01:06

anthony


1 Answers

iron-input

bindValue String Use this property instead of value for two-way data binding.

   <paper-input-container id="email_container">
    <paper-input-error>E-mail or Password is incorrect</paper-input-error>
    <label>E-Mail Address</label>
    <input is="iron-input" id="email" on-blur="validateEmail" bind-value="{{emailInput::input}}">
    </paper-input-container>

    <paper-input-container id="password_container">
        <label>Password</label>
        <input is="iron-input" id="password" type="password" bind-value="{{passwordInput::input}}">
    </paper-input-container>

With bindValue apparently both this.emailInput = null and this.set('emailInput, null) do the trick.

like image 187
miyamoto Avatar answered Oct 14 '22 09:10

miyamoto