| 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 |