data-binding - 聚合物绑定到 inputValue 并使验证工作

Question

我有一个纸质输入元素，我将一个变量绑定到元素的 inputValue 以便实时显示用户输入。该字段是必需的，因此如果该字段为空，则组件会按预期显示警告。

当我清理变量时出现问题，在这种情况下验证状态不会更新。

这里的代码：

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-input/paper-input.html">

<polymer-element name="slimy-coconut" attributes="invalid,inputValue">
  <template>

    <paper-input required="true" invalid={{invalid}} inputValue={{inputValue}}></paper-input>
    invalid: {{invalid}}<br>
    inputValue: {{inputValue}}<br>
    <button on-click="{{cleanInputValue}}">Clean inputValue</button>
  </template>
  <script>
    Polymer('slimy-coconut', {

        cleanInputValue: function(event, detail, sender) {
        this.inputValue = "";

      }
    });
  </script>
</polymer-element>
<slimy-coconut name="Ele Dev"></slimy-coconut>

这是一个运行示例：https ://ele.io/fedy2/slimy-coconut

如何绑定到 inputValue 并使验证工作？

Answer 1

您可以将纸张输入的“无效”属性设置为 false - http://jsbin.com/rowehehiga/1/edit?html,output