As a newcomer to AngularJS, I ventured into creating a Bootstrap form with a loop but encountered an error. What could be the mistake I made?
<form class="form-horizontal" role="form" name="newForm" novalidate ng-controller="newFormController">
<div class="form-group" ng-class="{'has-error': newForm.{{field.name}}.$invalid && !newForm.{{field.name}}.$pristine}" ng-repeat="field in fields">
<label class="col-sm-2 control-label">{{field.label}}</label>
<div class="col-sm-10">
<input type="text" class="form-control" ng-model="{{field.name}}" name="{{field.name}}" {{field.validation}} placeholder="{{field.placeholder}}" />
<p ng-show="newForm.{{field.name}}.$invalid && !newForm.{{field.name}}.$pristine" class="help-block">{{field.error}}</p>
</div>
</div>
</form>
The issue at hand:
Syntax Error: Token 'field.name' is unexpected, expecting [:] at column 3 of the expression [{{field.name}}] starting at [field.name}}].
This occurs during parsing:
ng-model="{{field.name}}"
Here's the controller code:
function newFormController($scope) {
$scope.fields = [{
name: 'Firstname',
label: Label.Get('28076475'), //First Name
placeholder: Label.Get('44175380'), //Enter First Name
validation: 'required',
error: 'Firstname is required.'
}, {
name: 'Lastname',
label: Label.Get('28076500'), //Last Name
placeholder: Label.Get('44175365'), //Enter Last Name
validation: 'required',
error: 'Lastname is required.'
}];
}