Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

Commit fa2a50b

Browse files
committed
fix(ngValue): set value property and attribute instead of setting attribute only
input element reads the value from value property and override the value attribute so we need to set both Closes #14031 Closes #13984 BREAKING CHANGE: NgValue is no longer updating the "value attribute" only when the model change, because input element reads the value from "value attribute" only in case of "value property" has no value but when "value property" changed the input element will stop reading the value from "value attribute" and read it form the "value property". so the input value in the gui will not equal the value of the model, becuase the model update the "value attribute" only. Now ngValue updates both of "value attribute" and "value property" when the model change This shouldn't affect any application becuase this is a bug and input value in the gui should be updated when the model change
1 parent b8b5b88 commit fa2a50b

File tree

2 files changed

+30
-5
lines changed

2 files changed

+30
-5
lines changed

src/ng/directive/input.js

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1750,24 +1750,33 @@ var CONSTANT_VALUE_REGEXP = /^(true|false|\d+)$/;
17501750
</example>
17511751
*/
17521752
var ngValueDirective = function() {
1753+
//helper function
1754+
var updateElementValue = function(element, attr, value) {
1755+
/**
1756+
* input use 'value attribute' as default value if 'value property has no value'
1757+
* but once set the 'value property' it will not read value from 'value attribute'
1758+
* so we set both the value attribute and property here to avoid this problem.
1759+
*/
1760+
attr.$set('value', value);
1761+
element.prop('value', value);
1762+
};
1763+
17531764
return {
17541765
restrict: 'A',
17551766
priority: 100,
17561767
compile: function(tpl, tplAttr) {
17571768
if (CONSTANT_VALUE_REGEXP.test(tplAttr.ngValue)) {
17581769
return function ngValueConstantLink(scope, elm, attr) {
1759-
attr.$set('value', scope.$eval(attr.ngValue));
1770+
var value = scope.$eval(attr.ngValue);
1771+
updateElementValue(elm, attr, value);
17601772
};
17611773
} else {
17621774
return function ngValueLink(scope, elm, attr) {
17631775
scope.$watch(attr.ngValue, function valueWatchAction(value) {
1764-
attr.$set('value', value);
1776+
updateElementValue(elm, attr, value);
17651777
});
17661778
};
17671779
}
17681780
}
17691781
};
17701782
};
1771-
1772-
1773-

test/ng/directive/inputSpec.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3046,6 +3046,22 @@ describe('input', function() {
30463046
expect(inputElm[0].getAttribute('value')).toBe('something');
30473047
});
30483048

3049+
they('should update the $prop "value" property and attribute after change the "value" property', {
3050+
input: '<input type="text" ng-value="value">',
3051+
textarea: '<textarea ng-value="value">></textarea>'
3052+
}, function(tmpl) {
3053+
var element = helper.compileInput(tmpl);
3054+
3055+
helper.changeInputValueTo('newValue');
3056+
expect(element[0].value).toBe('newValue');
3057+
expect(element[0].getAttribute('value')).toBeNull();
3058+
3059+
$rootScope.$apply(function() {
3060+
$rootScope.value = 'anotherValue';
3061+
});
3062+
expect(element[0].value).toBe('anotherValue');
3063+
expect(element[0].getAttribute('value')).toBe('anotherValue');
3064+
});
30493065

30503066
it('should evaluate and set constant expressions', function() {
30513067
var inputElm = helper.compileInput('<input type="radio" ng-model="selected" ng-value="true">' +

0 commit comments

Comments
 (0)