Error message provided by databinding is not displayed.

[iosifa]

Description

Error message provided by databinding is not displayed.

Expected outcome

I have the following paper-input:

 <paper-input id="spendingAmount"  on-value-changed='recalculateGrandTotal' 
            on-blur="validate" 
            error-message="{{spendingAmountValidationError}}">

on-blur event, the validate function is triggered and based on the business rules the 'spendingAmountValidationError' property is updated but the message is not displayed within the paper-input.

Actual outcome

The error message is not displayed.

Steps to reproduce

Example

1. Put a `paper-input` element in the page.
2. Assign a function for on-blur event.
2. Create a dummy String property in your web component.
3. Make sure the on-blur event is changing the value in the dummy string property.
4. The paper-input error message is not displayed.

[iosifa]

I managed to solve it. After research I found out that for an error message to be displayed, the invalid property of the paper-input must be set to true. So I had to create a new property spendingAmounthasValidationErrors that is computed and returns a Boolean value.

<paper-input id="spendingAmount"  on-value-changed='recalculateGrandTotal' 
     on-blur="validate"  error-message="[[spendingAmountValidationError]]" 
     invalid$="[[spendingAmounthasValidationErrors]]">
</paper-input>

[notwaldorf]

You can also use auto-validate, to re-validate the input every time the value changes (if you validate with a regex or something). Otherwise, the way you have it should work! 👍