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 36 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
47 /** | 47 /** |
48 * Use this property instead of `value` for two-way data binding. | 48 * Use this property instead of `value` for two-way data binding. |
49 */ | 49 */ |
50 bindValue: { | 50 bindValue: { |
51 observer: '_bindValueChanged', | 51 observer: '_bindValueChanged', |
52 type: String | 52 type: String |
53 }, | 53 }, |
54 | 54 |
55 /** | 55 /** |
56 * Set to true to prevent the user from entering invalid input. The new in
put characters are | 56 * Set to true to prevent the user from entering invalid input. The new in
put characters are |
57 * matched with `allowedPattern` if it is set, otherwise it will use the `
pattern` attribute if | 57 * matched with `allowedPattern` if it is set, otherwise it will use the `
type` attribute (only |
58 * set, or the `type` attribute (only supported for `type=number`). | 58 * 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 expressing a set of characters to enforce the validi
ty of input characters. |
| 66 * The recommended value should follow this format: `[a-ZA-Z0-9.+-!;:]` th
at list the characters |
| 67 * allowed as input. |
66 */ | 68 */ |
67 allowedPattern: { | 69 allowedPattern: { |
68 type: String, | 70 type: String, |
69 observer: "_allowedPatternChanged" | 71 observer: "_allowedPatternChanged" |
70 }, | 72 }, |
71 | 73 |
72 _previousValidInput: { | 74 _previousValidInput: { |
73 type: String, | 75 type: String, |
74 value: '' | 76 value: '' |
75 }, | 77 }, |
76 | 78 |
77 _patternAlreadyChecked: { | 79 _patternAlreadyChecked: { |
78 type: Boolean, | 80 type: Boolean, |
79 value: false | 81 value: false |
80 } | 82 } |
81 | 83 |
82 }, | 84 }, |
83 | 85 |
84 listeners: { | 86 listeners: { |
85 'input': '_onInput', | 87 'input': '_onInput', |
86 'keypress': '_onKeypress' | 88 'keypress': '_onKeypress' |
87 }, | 89 }, |
88 | 90 |
89 get _patternRegExp() { | 91 get _patternRegExp() { |
90 var pattern; | 92 var pattern; |
91 if (this.allowedPattern) { | 93 if (this.allowedPattern) { |
92 pattern = new RegExp(this.allowedPattern); | 94 pattern = new RegExp(this.allowedPattern); |
93 } else if (this.pattern) { | |
94 pattern = new RegExp(this.pattern); | |
95 } else { | 95 } else { |
96 switch (this.type) { | 96 switch (this.type) { |
97 case 'number': | 97 case 'number': |
98 pattern = /[0-9.,e-]/; | 98 pattern = /[0-9.,e-]/; |
99 break; | 99 break; |
100 } | 100 } |
101 } | 101 } |
102 return pattern; | 102 return pattern; |
103 }, | 103 }, |
104 | 104 |
105 ready: function() { | 105 ready: function() { |
106 this.bindValue = this.value; | 106 this.bindValue = this.value; |
107 }, | 107 }, |
108 | 108 |
109 /** | 109 /** |
110 * @suppress {checkTypes} | 110 * @suppress {checkTypes} |
111 */ | 111 */ |
112 _bindValueChanged: function() { | 112 _bindValueChanged: function() { |
113 if (this.value !== this.bindValue) { | 113 if (this.value !== this.bindValue) { |
114 this.value = !(this.bindValue || this.bindValue === 0) ? '' : this.bindV
alue; | 114 this.value = !(this.bindValue || this.bindValue === 0 || this.bindValue
=== false) ? '' : this.bindValue; |
115 } | 115 } |
116 // 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 |
117 this.fire('bind-value-changed', {value: this.bindValue}); | 117 this.fire('bind-value-changed', {value: this.bindValue}); |
118 }, | 118 }, |
119 | 119 |
120 _allowedPatternChanged: function() { | 120 _allowedPatternChanged: function() { |
121 // Force to prevent invalid input when an `allowed-pattern` is set | 121 // Force to prevent invalid input when an `allowed-pattern` is set |
122 this.preventInvalidInput = this.allowedPattern ? true : false; | 122 this.preventInvalidInput = this.allowedPattern ? true : false; |
123 }, | 123 }, |
124 | 124 |
(...skipping 88 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
213 // Empty, non-required input is valid. | 213 // Empty, non-required input is valid. |
214 if (!this.required && this.value == '') { | 214 if (!this.required && this.value == '') { |
215 this.invalid = false; | 215 this.invalid = false; |
216 return true; | 216 return true; |
217 } | 217 } |
218 | 218 |
219 var valid; | 219 var valid; |
220 if (this.hasValidator()) { | 220 if (this.hasValidator()) { |
221 valid = Polymer.IronValidatableBehavior.validate.call(this, this.value); | 221 valid = Polymer.IronValidatableBehavior.validate.call(this, this.value); |
222 } else { | 222 } else { |
223 this.invalid = !this.validity.valid; | 223 valid = this.checkValidity(); |
224 valid = this.validity.valid; | 224 this.invalid = !valid; |
225 } | 225 } |
226 this.fire('iron-input-validate'); | 226 this.fire('iron-input-validate'); |
227 return valid; | 227 return valid; |
228 } | 228 } |
229 | 229 |
230 }); | 230 }); |
231 | 231 |
232 /* | 232 /* |
233 The `iron-input-validate` event is fired whenever `validate()` is called. | 233 The `iron-input-validate` event is fired whenever `validate()` is called. |
234 @event iron-input-validate | 234 @event iron-input-validate |
235 */ | 235 */ |
OLD | NEW |