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

Commit 0dc6c46

Browse files
committed
fix(ngValue): set value property instead of attr
in case of input element set value using property instead of attribute fixed #13984
1 parent b8b5b88 commit 0dc6c46

File tree

2 files changed

+32
-6
lines changed

2 files changed

+32
-6
lines changed

src/ng/directive/input.js

Lines changed: 15 additions & 6 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 setElementValue = 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[0].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+
setElementValue(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+
setElementValue(elm, attr, value);
17651777
});
17661778
};
17671779
}
17681780
}
17691781
};
1770-
};
1771-
1772-
1773-
1782+
};

test/ng/directive/inputSpec.js

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

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

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

0 commit comments

Comments
 (0)