Angular.js: Textarea placeholder binding causes exception in IE11

Created on 19 Nov 2013 · 23Comments · Source: angular/angular.js

See the following fiddle:

While the correct placeholder appears, I also get the following stack trace in the console:

Error: Invalid argument.
   at interpolateFnWatchAction (http://code.angularjs.org/1.2.1/angular.js:6366:15)
   at $digest (http://code.angularjs.org/1.2.1/angular.js:11443:21)
   at $apply (http://code.angularjs.org/1.2.1/angular.js:11682:13)
   at Anonymous function (http://code.angularjs.org/1.2.1/angular.js:1285:9)
   at invoke (http://code.angularjs.org/1.2.1/angular.js:3616:18)
   at doBootstrap (http://code.angularjs.org/1.2.1/angular.js:1283:5)
   at bootstrap (http://code.angularjs.org/1.2.1/angular.js:1297:5)
   at angularInit (http://code.angularjs.org/1.2.1/angular.js:1246:5)
   at Anonymous function (http://code.angularjs.org/1.2.1/angular.js:20126:5)
   at trigger (http://code.angularjs.org/1.2.1/angular.js:2298:7)

IE version is 11.0.9600.16438

IE10 IE11 low investigation broken expected use

Source

provegard

Most helpful comment

As the docs suggest: Easiest way to address such issues is to switch from using placeholder="{{value}}" to ng-attr-placeholder="{{value}}".

seckardt on 28 Mar 2014

👍33

All 23 comments

Also happens in ie10, attempting to access nodeValue on a parentless TextNode (nodeType=3)

// in function addTextInterpolateDirective()
node[0].nodeValue = value

jamie-pate on 4 Dec 2013

Here's a temporary workaround... http://stackoverflow.com/a/20649762/1009125

aschiebler on 18 Dec 2013

I still prefer capability sniffing over user agent sniffing..... See my post on #2614

jamie-pate on 18 Dec 2013

Sounds great, but which capability could be tested in this case? Ie....ugh

aschiebler on 18 Dec 2013

The capability to not raise an event when the placeholder changes (like the
snippet I posted in the other issue (I think it still applies))
On 17 Dec 2013 21:24, "Ender2050" [email protected] wrote:

Sounds great, but which capability could be tested in this case? Ie....ugh

—
Reply to this email directly or view it on GitHubhttps://github.com/angular/angular.js/issues/5025#issuecomment-30818022
.

jamie-pate on 18 Dec 2013

As the docs suggest: Easiest way to address such issues is to switch from using placeholder="{{value}}" to ng-attr-placeholder="{{value}}".

seckardt on 28 Mar 2014

👍33

@seckardt Cool, I didn't know about ngAttr. I wrote a custom directive as a workaround, but now I can get rid of it.

I see it's under Developer Guide / Directives in the docs, but not in the API reference. Wouldn't it be a good idea to have it there too?

provegard on 28 Mar 2014

This isn't just placeholder binding that throws this error, though. This failed with the same behavior:

<textarea ng-model="foo">{{ foo }}</textarea>

The interpolation is redundant, so the workaround in this case was just to remove {{ foo }}, but it's kind-of annoying that the error message for this is so useless. I spent several hours troubleshooting this before finding the issue.

tomasaschan on 11 Nov 2015

👍6

This error happens also when setting the style style="padding: 3px; background: {{l.Color}}; opacity: 0.7; border-radius: 5px"

How can I substitute this expression in a way that it works with IE?

RafaelSalguero on 10 Feb 2016

This is a known issue with IE. As mentioned above, you can use ng-attr-style="...".

gkalpak on 10 Feb 2016

👍1

Anybody getting this error just look for arguments sent for textarea.

I am using angular 1.2.28 I had the same error.
<textarea ng-model="data">{{data}}</textarea> works fine in Mozilla. But, IE 11 gives invalid argument error. for this piece of code.
Solution:
<textarea ng-model="data"></textarea> OR <textarea>{{data}}</textarea>
Looks like binding to ng-model and putting value directly causes this error which is logical also.
Just thought this might be of help. Anyway, this post helped me a lot.

aditi-andurkar on 28 Jul 2016

This error happens, because (for whatever reason) IE temporarily converts <textarea placeholder="{{'foo'}}"></textarea> to <textarea placeholder="{{ 'foo' }}">{{ 'foo' }}</textarea>. This adds the implicit text-interpolation directive on the {{ 'foo' }} TEXT_NODE, but by the time Angular tries to set the TEXT_NODE's value, it has been removed again by IE.

And trying to set the nodeValue of a parentless TEXT_NODE (e.g. parentlessTextNode.nodeValue = 'foo') throws in IE.

I think this is not an Angular-related issue and (taking into account that there is a reasonable workaround - using ng-attr-placeholder) we should just document it and move on.

gkalpak on 29 Jul 2016

👍1

This bug report seems relevant. It seems that the placeholder value would stick around as <textarea>'s content. They have fixed that (at least in latest IE11), but not 100%; i.e. the placeholder text does appear as content, albeit only temporarily.

gkalpak on 29 Jul 2016

In my case, I dont even have a placeholder. I just have something similar to this <textarea ng-model='$parent.freetext.text' >{{dataobject.text}}</textarea> and I still get the interpolation error. Any thoughts/solution is greatly appreciated. FYI, I am using 1.5 version of angularjs...

LotusShiv on 10 Sep 2016

@LotusShiv, don't put any value in your text area. If you want to initialize it, put the value on the model instead.

gkalpak on 10 Sep 2016

So gkalpak - in my case I need to bind to the existing value from a WebAPI call and also allow user to edit the text area. Hence I had the ng-model and textarea value setting. Now the way I understood from your response is that - I have to set the value coming from the WebAPI call to a $scope object variable and use the same $scope object variable for setting the edited contents as well. Am I understanding you correctly? Again thanks in advance for any suggestions/solution. Sample code is appreciated too....

LotusShiv on 11 Sep 2016

Addendum to my previous comment, I did exactly as I explained of what I understood from gkalpak 's suggestion and it worked. Thanks gkalpak, works just fine in IE 11. Saved a lot of heartache.... :) after days of trying so many other tips and tricks ....

LotusShiv on 11 Sep 2016

👍1

As many of the people above have mentioned this error is in fact a usage error, in my case it was not in a textarea but the comments above really helped. Thanks everyone :)
Will put my specific problem and fix below for others that might be in the same situation.

Not working;
<a concat="[result.responsible.Contact.firstName, result.responsible.Contact.lastName]">{{responsibleFullName}}</a>
Working;
<a>{{result.responsible.Contact.firstName}} {{result.responsible.Contact.lastName}}</a>

Lelli on 3 Nov 2016

Also encountered this problem, for me it was template attr in directive. When you use just template: '{{field}}' you will get this error. For me I was replacing element HTML with compiled content, so the solution was to remove {{field}}and leave it just with template: '', but this is strange bug and debugging it in IE is pain :(

Pirozek on 16 Oct 2017

Same thing with the rows binding for the textarea, and yes, IE wasn't giving me ANY clues until I've had to turn on the "break on every exception" mode and stepped through a billion of first-chance exceptions. Angular debug info in the exception also only pointed me to the component, but not to what's wrong with it. Anyway, fixed by changing the binding from [rows]="myRowsField" to [attr.rows]="myRowsField"

rsheptolut on 25 Dec 2017

@seckardt you make my day. One of my very old project is still based on Angular1, struggling to find solution to this problem. Thanks a lot.

alex123bob on 19 Feb 2018

Even if there is an "easy workaround", it would be a lot easier, if the error message would be a bit more helpful. I have a huge project and _somewhere_ there is this double interpolation. How am I supposed to find this?