Having a hard time debugging error - Token '{' invalid key at column 2
Solution 1
I notice that this error also happens when binding data to an attribute on a custom directive. Where
$scope.myData.value = "Hello!";
This causes the error:
<my-custom-directive my-attr="{{myData.value}}"></my-custom-directive>
But this works fine:
<my-custom-directive my-attr="myData.value"></my-custom-directive>
Solution 2
Your problem is here:
ng-class="{ 'has-error': {{field}}.$dirty && {{field}}.$invalid }"
Remove {{ }}
:
ng-class="{ 'has-error': field.$dirty && field.$invalid }"
Also you have the same issue here:
ng-messages='{{field}}.$error'
Replace with:
ng-messages='field.$error'
However fixing those will most likely also cause an error for this line:
ng-message='{{k}}'
So you have to change it to:
ng-message='k'
Angelo
Updated on December 13, 2020Comments
-
Angelo over 3 years
I have encountered an error which I'm unable to debug.
form-field.html
<div class='row form-group' ng-form="{{field}}" ng-class="{ 'has-error': {{field}}.$dirty && {{field}}.$invalid }"> <label class='col-sm-2 control-label'> {{ field | labelCase }} <span ng-if='required'>*</span></label> <div class='col-sm-6' ng-switch='required'> <input ng-switch-when='true' ng-model='record[field][0]' type='{{record[field][1]}}' class='form-control' required ng-change='update()' ng-blur='blurUpdate()' /> <div class='input-group' ng-switch-default> <input ng-model='record[field][0]' type='{{record[field][1]}}' class='form-control' ng-change='update()' ng-blur='blurUpdate()' /> <span class='input-group-btn'> <button class='btn btn-default' ng-click='remove(field)'><span class='glyphicon glyphicon-remove-circle'></span></button> </span> </div> </div> <div class='col-sm-4 has-error' ng-show='{{field}}.$dirty && {{field}}.$invalid' ng-messages='{{field}}.$error'> <p class='control-label' ng-message='required'> {{ field | labelCase }} is required. </p> <p class='control-label' ng-repeat='(k, v) in types' ng-message='{{k}}'> {{ field | labelCase }} {{v[1]}}</p> </div> </div>
new.html
<h2> New Contact </h2> <form name='newContact' novalidate class='form-horizontal'> <form-field record='contact' field='firstName' live='false' required='true'></form-field> <div class='row form-group'> <div class='col-sm-offset-2'> <button class='btn btn-primary' ng-click='save()'> Create Contact </button> </div> </div> </form>
I'm getting the following error:
In the browser:
Error: [$parse:syntax] http://errors.angularjs.org/1.4.1/$parse/syntax?p0=%7B&p1=invalid%20key&p2=2&p3=%7B%7Bfield%7D%7D.%24error&p4=%7Bfield%7D%7D.%24error
On angular site:
Error: $parse:syntax Syntax Error Syntax Error: Token '{' invalid key at column 2 of the expression [{{field}}.$error] starting at [{field}}.$error].
Does someone know why? Thanks!
-
Thomas.Benz about 8 yearsyour answer is an excellent tip. By the way, is there a free good debugger that can be plugged in google Chrome to catch that error? I am an AngularJs newbie.
-
Jeff Johny about 8 years'field' is a scope variable. I want to update html with that scope variable. If we remove {{}} then 'field' couldn't reflect in html page. Any solution for that ?