Reset Value and label of polymer paper-input-container

Question

I am having trouble returning the label inside the paper input container after submitting the form. The form is a simple login form. If the user logs back in again and again without refreshing the page (from the browser), the label seems to be stuck, as if the input had a value.

Here is an image to show the difference:

Here is 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 in the post-login state:

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

I thought this would reset the entire container in some way, but it does nothing:

 this.$.email_container = null; this.$.password_container = null; 

Answer 1

iron-input

bindValue string Use this property instead of a 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.

Answer 2

I am not sure why the first form did not work (I use paper input, not an input for iron, and it worked there), maybe the problem is somewhere in the code that is not shown. But try something else - directly set the value:

 this.$.email.value = null; // where 'email' is the ID of the iron-input 

I'm not quite sure how this will interact with bind-value , but the docs say

iron-input adds a bind-value property that reflects value

Answer 3

You can reset fill out the iron-form by calling the reset() method:

 document.getElementById('idOfForm').reset();