OLD | NEW |
1 /* | 1 /* |
2 `<iron-input>` adds two-way binding and custom validators using `Polymer.IronVal
idatorBehavior` | 2 `<iron-input>` adds two-way binding and custom validators using `Polymer.IronVal
idatorBehavior` |
3 to `<input>`. | 3 to `<input>`. |
4 | 4 |
5 ### Two-way binding | 5 ### Two-way binding |
6 | 6 |
7 By default you can only get notified of changes to an `input`'s `value` due to u
ser input: | 7 By default you can only get notified of changes to an `input`'s `value` due to u
ser input: |
8 | 8 |
9 <input value="{{myValue::input}}"> | 9 <input value="{{myValue::input}}"> |
10 | 10 |
(...skipping 47 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
58 * set, or the `type` attribute (only supported for `type=number`). | 58 * set, or the `type` attribute (only supported for `type=number`). |
59 */ | 59 */ |
60 preventInvalidInput: { | 60 preventInvalidInput: { |
61 type: Boolean | 61 type: Boolean |
62 }, | 62 }, |
63 | 63 |
64 /** | 64 /** |
65 * Regular expression to match valid input characters. | 65 * Regular expression to match valid input characters. |
66 */ | 66 */ |
67 allowedPattern: { | 67 allowedPattern: { |
68 type: String | 68 type: String, |
| 69 observer: "_allowedPatternChanged" |
69 }, | 70 }, |
70 | 71 |
71 _previousValidInput: { | 72 _previousValidInput: { |
72 type: String, | 73 type: String, |
73 value: '' | 74 value: '' |
74 }, | 75 }, |
75 | 76 |
76 _patternAlreadyChecked: { | 77 _patternAlreadyChecked: { |
77 type: Boolean, | 78 type: Boolean, |
78 value: false | 79 value: false |
(...skipping 30 matching lines...) Expand all Loading... |
109 * @suppress {checkTypes} | 110 * @suppress {checkTypes} |
110 */ | 111 */ |
111 _bindValueChanged: function() { | 112 _bindValueChanged: function() { |
112 if (this.value !== this.bindValue) { | 113 if (this.value !== this.bindValue) { |
113 this.value = !(this.bindValue || this.bindValue === 0) ? '' : this.bindV
alue; | 114 this.value = !(this.bindValue || this.bindValue === 0) ? '' : this.bindV
alue; |
114 } | 115 } |
115 // manually notify because we don't want to notify until after setting val
ue | 116 // manually notify because we don't want to notify until after setting val
ue |
116 this.fire('bind-value-changed', {value: this.bindValue}); | 117 this.fire('bind-value-changed', {value: this.bindValue}); |
117 }, | 118 }, |
118 | 119 |
| 120 _allowedPatternChanged: function() { |
| 121 // Force to prevent invalid input when an `allowed-pattern` is set |
| 122 this.preventInvalidInput = this.allowedPattern ? true : false; |
| 123 }, |
| 124 |
119 _onInput: function() { | 125 _onInput: function() { |
120 // Need to validate each of the characters pasted if they haven't | 126 // Need to validate each of the characters pasted if they haven't |
121 // been validated inside `_onKeypress` already. | 127 // been validated inside `_onKeypress` already. |
122 if (this.preventInvalidInput && !this._patternAlreadyChecked) { | 128 if (this.preventInvalidInput && !this._patternAlreadyChecked) { |
123 var valid = this._checkPatternValidity(); | 129 var valid = this._checkPatternValidity(); |
124 if (!valid) { | 130 if (!valid) { |
125 this.value = this._previousValidInput; | 131 this.value = this._previousValidInput; |
126 } | 132 } |
127 } | 133 } |
128 | 134 |
(...skipping 91 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
220 this.fire('iron-input-validate'); | 226 this.fire('iron-input-validate'); |
221 return valid; | 227 return valid; |
222 } | 228 } |
223 | 229 |
224 }); | 230 }); |
225 | 231 |
226 /* | 232 /* |
227 The `iron-input-validate` event is fired whenever `validate()` is called. | 233 The `iron-input-validate` event is fired whenever `validate()` is called. |
228 @event iron-input-validate | 234 @event iron-input-validate |
229 */ | 235 */ |
OLD | NEW |