siaw23 siaw23 - 5 months ago 66x
Javascript Question

Error: $parse:syntax Syntax Error

This error is driving me crazy and I need help.

Syntax Error: Token '{' invalid key at column 2 of the expression [{{
field }}.$error] starting at [{ field }}.$error].


<div class='row form-group' ng-form="{{ field }}" ng-clase="{ '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>

<div class='col-sm-4 has-error' ng-show='{{ field }}.$dirty && {{ field }}.$invalid' ng-messages='{{ field }}.$error'>
<p class='control-label' ng-messages='required'> {{ field | labelCase }} is required. </p>
<p class='control-label' ng-repeat='(k, v) in types' ng-messages='{{ k }}'> {{ field | labelCase }} {{ v[1] }} </p>


.value('FieldTypes', {
text: ['Text', 'should be text'],
email: ['Email', 'should be email'],
number: ['Number', 'should be number'],
date: ['Date', 'should be date'],
datetime: ['Datetime', 'should be datetime'],
time: ['Time', 'should be time'],
month: ['Month', 'should be month'],
week: ['Week', 'should be week'],
url: ['URL', 'should be URL'],
tel: ['Phone Number', 'should be phone number'],
color: ['Color', 'should be color']
.directive('formField', function ($timeout, FieldTypes) {
return {
restrict: 'EA',
templateUrl: 'views/form-field.html',
replace: true,
scope: {
record: '=',
field: '@',
live: '@',
required: '@'
link: function ($scope, element, attr) {
$scope.types = FieldTypes;

$scope.remove = function (field) {
delete $scope.record[field];

$scope.blurUpdate = function () {
if ($ !== 'false') {
$scope.record.$update(function (updatedRecord) {
$scope.record = updatedRecord;
var saveTimeout;
$scope.update = function () {
saveTimeout = $timeout($scope.blurUpdate, 1000);


<input type='search' class='form-control' placeholder='Search' ng-model='query'/>

<table class='table table-hover table-bordered'>
<th ng-repeat='field in fields' ng-click='sort(field)'>
{{ field | labelCase }}
<span ng-show='sort.field === field && !sort.order' class='glyphicon glyphicon-chevron-down'></span>
<span ng-show='sort.field === field && sort.order' class='glyphicon glyphicon-chevron-up'></span>
<tr ng-click='show(' ng-repeat='contact in contacts | filter: query | orderBy: sort.field : sort.order'>
<td ng-repeat='field in fields'>
{{ contact[field][0] }}

Left to me, there's no syntax error. Any idea why this is happening?


When {{ field }}.$error is evaluated the first time {{ field }} is not interpolated yet, so Angular interprets the first { as the beginning of an object declaration and the second one as a key. After the first digest cycle it works because it has been interpolated to whatever.$error.

There's absolutely no need for {{ field }}. Use ng-form="form", replace {{ field }} with form and remove the parameter from remove() (no pun intended). The name of the form object is completely irrelevant.