I am working on a form builder application in Angular and have run into an odd bug in Chrome. I am dynamically setting a form input type based on a variable. This seems to work for all input types except for "file", which will always change to "text" in Chrome. A simple example is below:
<div ng-app="app">
<input type="{{'file'}}" /><br />
<input type="{{'color'}}" /><br />
<input type="{{'button'}}" value="button" />
</div>
Indeed, it sounds like a bug, but you can easily bypass it using ngAttr:
<input ng-attr-type="{{'file'}}" />
<input ng-attr-type="{{'color'}}" />
<input ng-attr-type="{{'button'}}" value="button" />
I propose a basic version of ng-type directive :
angular.module('ng').directive('ngType', function ($timeout) {
return {
scope: {
ngType: "="
},
link: function ($scope, element, attr) {
$scope.$watch('ngType', function (newValue, old) {
element.attr('type', newValue);
});
}
};
});
http://jsfiddle.net/camus/x649Q/2/
while the "bug" get fixed.
EDIT : blackhole answer is the right one.