AngularJS, Internet Explorer, textarea and placeholder

Mats Oustad

I encountered an issue regarding placeholder attribute and interpolation on textareas in AngularJS(using version 1.2.16)

For example:

<textarea name="someComment" id="someComment" ng-model="someModel.comment" placeholder="{{somePlaceholder}}"></textarea>

In IE10 and IE11 this will generate the following error:

Error: Invalid argument.
at interpolateFnWatchAction (angular.js:6834:15)
at Scope.prototype.$digest (angular.js:12251:23)
at Scope.prototype.$apply (angular.js:12516:13)
at done (angular.js:8204:34)
at completeRequest (angular.js:8412:7)
at xhr.onreadystatechange (angular.js:8351:11)

The solution

The solution to this problem is to replace the placeholder attribute with ng-attr-placeholder, leaving us with the following html

<textarea name="someComment" id="someComment" ng-model="someModel.comment" ng-attr-placeholder="{{somePlaceholder}}"></textarea>