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!
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>
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'
This problem happened to me when i was following the same tutorial , and i discovered that the solution in my case is that i was using a newer version of ngMessages so i have to update my bower.json file with the same version in the videos (starting from version 1.4 the example doesn't work), then every thing works fine and here is my dependencies section:
"dependencies": {
"angular": "1.3.9",
"angular-route": "1.3.9",
"angular-resource": "1.3.9",
"angular-messages": "1.3.9",
"bootstrap": "^3.3.6"}