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>

This will work with no problems:

<div ng-app>
    <input ng-model="placeholderModel" type="text"/>
    <textarea id="message" placeholder="{{placeholderModel}}" ng-model="textareaModel"/>

Running example here:

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


<textarea placeholder="{[{ 'NAME' | translate }]}" ng-model="name" name="name"></textarea>


<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', [
        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.

Read More:   Identifying Array Object [duplicate]

It’s not the greatest solution, but it works. Hope that helps.

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Similar Posts