<iron-input>
adds two-way binding and custom validators using Polymer.IronValidatorBehavior
to <input>
.
Since type-extensions are not available in 2.0, <iron-input
is a wrapper against a native input
:
<iron-input>
<input>
</iron-input>
Other changes:
prevent-invalid-input
andallowed-pattern
had to be always used together; deletedprevent-invalid-input
, so that onlyallowed-pattern
is needed- added an
auto-validate
property - Note: imperatively setting the
value
attribute on the native<input>
is not supported -- the nativeinput
does not fire an event in this case, so this update cannot be observed, andbind-value
cannot be updated.
By default you can only get notified of changes to an input
's value
due to user input:
<input value="{{myValue::input}}">
iron-input
adds the bind-value
property that mirrors the value
property, and can be used
for two-way data binding. bind-value
will notify if it is changed either by user input or by script.
<iron-input bind-value="{{bindValue}}">
<input value="{{value::input}}">
</iron-input>
You can use custom validators that implement Polymer.IronValidatorBehavior
with <iron-input>
.
<iron-input auto-validate validator="my-custom-validator">
<input placeholder="only 'cat' is valid">
</iron-input>
It may be desirable to only allow users to enter certain characters. You can use the
prevent-invalid-input
and allowed-pattern
attributes together to accomplish this. This feature
is separate from validation, and allowed-pattern
does not affect how the input is validated.
<!-- only allow characters that match [0-9] -->
<iron-input allowed-pattern="[0-9]">
<input pattern="\d{5}">
</iron-input>