ng-repeat表达式内的AngularJS ng-class

时间:2018-12-30 10:37:42

标签: angularjs ng-class

我正在尝试使用下面的代码显示动态表单错误验证,但是我在ng-class表达式中遇到异常。我的错误是什么,我该如何解决?

.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​​错误:[$ parse:语法] http://errors.angularjs.org/1.7.5/ $ parse /语法?p0 =%2B&p1 = is%20not%20a%20valid%20identifier&p2 = 119&p3 =%7B%20'has-错误'%20%3A%20%0A%20%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%20'has-success'%3A%20form。%2Bfield.name%2B。% 24valid%7D&p4 =%2Bfield.name%2B。%24valid%7D

1 个答案:

答案 0 :(得分:2)

唯一正确的方法应该是

<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

重点是访问存储在变量中的form对象属性。这只能通过form[field.name]的方式来完成,但是您所做的-您试图将对象属性和名称合并到一个字符串中,因此无法实现