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