Following the recent changes to paper-input and the introduction of
paper-input-decorator (polymer v0.5.1), I'm now having trouble implementing
input validation. For instance, prior to the recent changes I had
constructed a custom 'property-editor' polymer element (i.e. an element
that essentially combines a configurable icon, a configurable input control
(type paper-dropdown-menu or regular input), and an associated optional
unit value entry control (type paper-dropdown-menu or paper-input)), and it
was very functional. Here is a small subset of code showing one of the
templates within the aforementioned custom element, that activated when a
regular expression pattern was provided to it. This was working well:
<template if="{{controlType == 'input' && controlValidPattern != null}}">
<paper-input id="{{controlId}}" value="{{inputValue}}" label=
"{{controlLabel}}" floatingLabel="{{controlFloatingLabel}}" pattern=
"{{controlValidPattern}}" error="{{controlErrorMsg}}" required=
"{{controlInputRequired}}" maxlength="{{controlMaxLength}}">
</paper-input>
</template>
Then I had implemented an `inputValueChanged` watcher function, which in
turn fired a custom event for the host/consuming element to act on as
required.
The end goal is of course to display the validation error message for the
control when the current input is invalid (which can occur 'live' as the
user types, and could be present when the control is loaded with the
initial input value), *but* prevent the 'inputValueChanged' function from
firing unless the input is valid, *and* also not fire that event until the
user leaves the control (on blur etc.). I've been playing around a little
bit trying to get this to work again using the new versions of the paper
elements (see example attempt below), but still having some difficulty.
Can anyone kindly provide an example that achieves regular expression
pattern matching, with the desired behaviors described above?
<template if="{{controlType == 'input' && controlValidPattern != null}}">
<paper-input-decorator label="{{controlLabel}}" floatingLabel=
"{{controlFloatingLabel}}" error="{{controlErrorMsg}}" isInvalid=
"{{invalidEntry}}">
<input is="core-input" id="{{controlId}}" value="{{inputValue}}"
committedValue="{{committedValue}}" pattern="{{controlValidPattern}}"
maxlength="{{controlMaxLength}}" required="{{controlInputRequired}}" size=
"{{controlWidth}}">
</paper-input-decorator>
</template>
Thanks in advance for any advice/example you can lend!
Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups
"Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/5bf86c0a-789c-47b8-8fcf-b683d9570aa2%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
