Polymer binding to inputValue and make validation working

Question

I've a paper-input element and I'm binding a variable to the element's inputValue in order to show the user input in real time. The field is required, so if the field is empty the component shows a warning as expected.

The problem appears when I clean the variable, in which case the validation status is not updated.

Here the code:

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

Here a running example: https://ele.io/fedy2/slimy-coconut

How can I bind to the inputValue and make the validation work?

Answer 1

You can set the "invalid" property of paper-input to false - http://jsbin.com/rowehehiga/1/edit?html,output