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:
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;
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With