角度验证的工作原理

Question

我遇到了一些问题（主要是因为我对AngularJS指令缺乏了解）。我使用UI Bootstrap库中的Rating Directive指令结合我自己的自定义验证。使用来自控制器的对象数组中的ng-repeat创建多个评级指令实例。我使用其他范围变量来设置默认的“Rate Me”文本，自定义CSS类“ratingOptions.ratingStates”和最大值限制“ratingOptions.max”。一切都按照需要运行......这是我在视图中的指令代码（请注意，容器表单名为“categoryRatingFrom”：

<div data-ng-repeat="cats in categories">
    <div data-ng-form name="RatingFrom">
        <div class="row no-bottom-padding">
            <label class="col-sm-4 control-label">@{{ cats.name }}</label>

            <div class="col-sm-8">

                <div class="no-outline"
                     data-rating
                     data-ng-model="cats.value"
                     data-max="ratingOptions.max"
                     data-rating-states="ratingOptions.ratingStates"
                     data-on-hover="cats.onHover(value)"
                     data-on-leave="cats.onLeave()"
                     data-rating-validate > <!-- Notice the custom directive -->
                </div>
                @{{ cats.hoverState || cats.items[cats.value - 1].name || rateMe }}
            </div>
        </div>
    </div>
</div>

现在我希望在未设置值的情况下将指令实例设置为无效，默认值为零，但用户必须输入从1到ratingOptions.max的值（当前为6）。我有一个自定义指令来验证这个名为ratingValidate的指令。这是被调用/引导的，我能够确定每个指令实例的当前值，但是我希望最初将指令/ form-item设置为无效，一旦用户选择了一个值，我们就设置了指令/ form-item /实例有效。这应该相当容易，但使用ng-repeat我不确定如何引用特定的表单项。如果有人能帮助解释我在实验和搜索AngularJS文档时需要做什么，我将非常感激。这是我的指示......

angular.module('myApp')
    .directive('ratingValidate', function () {

       // ratingValidate
        return {
            restrict: 'A', // only activate on element attribute
            require: '?ngModel', // get a hold of NgModelController
            link: function (scope, element, attrs, ngModel) {

                // do nothing if no ng-model
                if (!ngModel) {
                    return;
                }

                // Listen for change events to enable binding
                element.bind('click change', function () {

                    console.log(element[0], attrs);
                    if(attrs.ariaValuenow === 0){
                        ngModel.$setValidity('', false); // What goes here??? How do I reference the item?
                    } else {
                        ngModel.$setValidity('', false); // What goes here??? How do I reference the item?
                    }

                });

            }
        };
    })
;

Answer 1

角度验证的工作原理

Angular使用'name'属性创建用于验证的$ scope变量。

例如，如果您有一个带有'required'属性的输入字段：

<form name="myform">
   <input name="firstname" ng-model="firstname" type="text" required/>
</form>

然后，要访问$ scope上的验证属性，您可以执行以下操作：

var validationFailed = $scope.myform.firstname.$error.required;

其中$ error是一个'required'作为布尔属性的对象。

在'required'指令中，您会看到如下内容：

                if(attrs.value == ''){
                    ngModel.$setValidity('required', true); // failed validation
                } else {
                    ngModel.$setValidity('required', false); // passed validation
                }

您可以将任何字符串传递给$ setValidity，它会为您设置$ error属性。例如，如果您这样做：

$setValidity('test', true)

然后会有一个名为'test'的$ error属性，它将被设置为true。然后，您可以访问该属性：

$scope.myform.firstname.$error.test

其他可用的验证属性是：

$scope.myform.firstname.$valid
$scope.myform.firstname.$invalid
$scope.myform.firstname.$pristine
$scope.myform.$valid
$scope.myform.$invalid
$scope.myform.$pristine

希望这有助于回答您的问题。

Answer 2

为了解决这个问题，我在指令HTML中添加了以下内容：

name="rating@{{$index}}

并在指令

中

ngModel.$setValidity(attrs.name, true); // or false depending on the condition

AngularJS - 使用$ setValidity和ng-repeat指令

2 个答案:

角度验证的工作原理