AngularJS on IE10+ ,textarea with placeholder cause “Invalid argument.”
I’m getting “Invalid argument” when using angularJS ,TextArea with placeholder, on IE10+.
This will ONLY happen when the textarea node is closed with </textarea> and will not happen when I close the textarea now on itself.
This will raise the “Invalid argument” exception:
<div ng-app>
<input ng-model="placeholderModel" type="text"/>
<textarea id="message" placeholder="{{placeholderModel}}" ng-model="textareaModel"></textarea>
</div>
This will work with no problems:
<div ng-app>
<input ng-model="placeholderModel" type="text"/>
<textarea id="message" placeholder="{{placeholderModel}}" ng-model="textareaModel"/>
</div>
Running example here: http://jsfiddle.net/huecc/
This seems to be an issue with the way you’re binding to the element’s placeholder – strange, I know.
I was able to get everything working correctly in IE using the ng-attr-placeholder directive instead of binding directly to the attribute in the DOM.
For example, instead of:
<textarea placeholder="{{placeholderModel}}" ng-model="textareaModel"></textarea>
Try this:
<textarea ng-attr-placeholder="placeholderModel" ng-model="textareaModel"></textarea>
Related: AngularJS v1.2.5 script error with textarea and placeholder attribute using IE11
I experienced this error today and randomly stumbled upon this question. Here’s what solved it for me
Before:
<textarea placeholder="{[{ 'NAME' | translate }]}" ng-model="name" name="name"></textarea>
After:
<textarea placeholder="{[{ 'NAME' | translate }]}" ng-model="name" name="name"> </textarea>
Note the little space inside the textarea, that’s what actually stopped IE from complaining…
I know this question is now pretty old, but thought I’d throw in my thoughts too. We ran into this issue several months ago and had to drum up a fix, so we ended up using this directive to solve the problem:
mod.directive('placeHolder', [
function(){
return {
restrict: 'A',
link: function(scope, elem, attrs){
scope.$watch(attrs.placeHolder, function(newVal,oldVal){
elem.attr('placeholder', newVal);
});
}
};
}
]);
And then you can use it in your views:
<textarea place-holder="placeholderModel" ng-model="textareaModel"></textarea>
Once your model data arrives (possibly asynchronously), the directive will add a traditional placeholder attribute to the <textarea> and it’ll work as you would want.
It’s not the greatest solution, but it works. Hope that helps.
