AngularJS ng-class inside ng-repeat expression - angularjs

Question

i am trying to show dynamic form error validations using below code but i am getting exception inside ng-class expressions. what is my mistake and how can i solve this?
.html
<form name="myForm" class="form-horizontal" role="form" ng-submit="submitForm()">
<div ng-repeat="field in entity.fields">
<ng-form name="form">
<!-- TEXT FIELDS -->
<div ng-if="field.type=='text'" class="form-group" ng-class="{ 'has-error' :
form.+field.name+.$dirty && form.+field.name+.$error.required,
'has-success': form.+field.name+.$valid}">
<label class="col-sm-2 control-label">{{field.label}}</label>
<div class="col-sm-6">
<input type="{{ field.type }}" dynamic-name="field.name" id="{{field.name}}" ng-model="field.data"
class="form-control" required />
<p class="help-block" ng-show="{{'form.'+field.name+'.$dirty && form.'+field.name+'.$error.required'}}">Required</p>
</div>
</div>
</ng-form>
</div>
</form>
.controller
routerApp.controller('DynamicController1', ['$scope', function ($scope) {
// we would get this from the api
$scope.entity = {
name: "Course",
fields:
[
{ type: "text", name: "firstname", label: "Name", required: true, data: "" },
{ type: "radio", name: "color_id", label: "Colors", options: [{ id: 1, name: "orange" }, { id: 2, name: "pink" }, { id: 3, name: "gray" }, { id: 4, name: "cyan" }], required: true, data: "" },
{ type: "email", name: "emailUser", label: "Email", required: true, data: "" },
{ type: "text", name: "city", label: "City", required: true, data: "" },
{ type: "password", name: "pass", label: "Password", min: 6, max: 20, required: true, data: "" },
{ type: "select", name: "teacher_id", label: "Teacher", options: [{ name: "Mark" }, { name: "Claire" }, { name: "Daniel" }, { name: "Gary" }], required: true, data: "" },
{ type: "checkbox", name: "car_id", label: "Cars", options: [{ id: 1, name: "bmw" }, { id: 2, name: "audi" }, { id: 3, name: "porche" }, { id: 4, name: "jaguar" }], required: true, data: "" }
]
};
}]);
https://codepen.io/rama-krishna-the-selector/pen/PXOwQp?editors=1010
angular.js:15536 Error: [$parse:syntax] http://errors.angularjs.org/1.7.5/$parse/syntax?p0=%2B&p1=is%20not%20a%20valid%20identifier&p2=119&p3=%7B%20'has-error'%20%3A%20%0A%20%20%20%20%20%20%20%20%20%20%20%20form.firstname.%24dirty%20%26%26%20form.firstname.%24error.required%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20'has-success'%3A%20form.%2Bfield.name%2B.%24valid%7D&p4=%2Bfield.name%2B.%24valid%7D

Answer 1

The only correct way should be
<div ng-repeat="field in entity.fields">
<ng-form name="form">
<div ng-if="field.type=='text'" class="form-group" ng-class="{ 'has-error' :
form[field.name].$dirty && form[field.name].$error.required,
'has-success': form[field.name].$valid}">
<label class="col-sm-2 control-label">{{field.label}}</label>
<div class="col-sm-6">
<input type="{{ field.type }}" dynamic-name="field.name" id="{{field.name}}" ng-model="field.data"
class="form-control" required />
<p class="help-block" ng-show="form[field.name].$dirty && form[field.name].$error.required">Required</p>
</div>
</div>
</ng-form>
codeopen
The point is to access form object property, that stored in a variable. This can be done only this way form[field.name], but what you did - you tried to merge object properties and names into a single string, that wont work that way