AngularJS on IE10+ ,textarea with placeholder cause “Invalid argument.”

Question

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/

Answer 1

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

Answer 2

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

Answer 3

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.