重置 Polymer paper-input-container 值和标签答案

【问题标题】：Reset Polymer paper-input-container value and label重置 Polymer paper-input-container 值和标签
【发布时间】：2015-06-17 01:36:30
【问题描述】：

我在提交表单后无法重置纸张输入容器内的标签。该表单是一个简单的登录表单。如果用户在没有（从浏览器）刷新页面的情况下登录、退出并重新登录，标签似乎会卡住，就好像输入中有值一样。

这是一张显示差异的图片：

这是元素内部的表单：

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

这两种方法都使表单进入“登录后”状态相同：

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

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

我认为这会以某种方式重置整个容器，但它什么也没做：

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

【问题讨论】：

标签： javascript polymer

【解决方案1】：

iron-input

绑定值细绳使用此属性而不是 value 进行双向数据绑定。

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

bindValue 显然 this.emailInput = null 和 this.set('emailInput, null) 都可以解决问题。

【讨论】：

这似乎是用于自定义输入，例如<ssn-input>。我的只是作为铁输入的常规输入。它几乎是从聚合物文档中逐字记录的。
试过这个不能解决问题。我也相信语法是 this.$.emailInput = null
'bind-value` 属性实现了两种方式的绑定。 value 属性仅因用户输入而通知。然后通过event.target.bindValue 内部的on-tap 事件处理程序或this.email.bindValue（使用id email）访问双向绑定。相关文档here.

【解决方案2】：

我不确定为什么第一个表单不起作用（我使用的是纸质输入，而不是铁质输入，它在那里起作用），问题可能出在未显示的代码中。但是要尝试的其他方法是直接设置值：

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

我不完全确定这将如何与 bind-value 交互，但文档确实说

iron-input 添加了与value 镜像的bind-value 属性属性

【讨论】：

【解决方案3】：

您可以通过调用reset() 方法重置完整的iron-form：

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

【讨论】：