如何判断角形自定义指令无效 [英] How to tell angular form custom directive is invalid

问题描述

我有自定义的角度指令:

I have custom angular directive:

<div class="input-group" name="name" ng-class="{ 'has-error has-feedback' : invalid }">
    <span class="input-group-addon"><i class="fa fa-paw"></i>&nbsp;{{label}}</span>
    <input type="text" class="form-control input-lg" ng-model="ngModel" ui-mask="99.99.9999" ui-mask-placeholder ui-mask-placeholder-char="-" model-view-value="true" placeholder="mm.dd.yyyy" ng-required="required" />
    <span ng-show="invalid" class="form-control-feedback" aria-hidden="true"><i class="fa fa-paw"></i></span>
</div>

指令初始化代码:

.directive("smth", function($rootScope) {
    var link = function(scope, element, attrs) {
        scope.invalid = false;
        scope.$watch("ngModel", function(value) {
            if(scope.ngModel) {
                scope.invalid = !$rootScope.timeStringValid(scope.ngModel);                }
            else {
                scope.invalid = false;
            }
        });
    };
    return {
        restrict: "E",
        scope: {
            name: "=name",
            label: "=label",
            ngModel: "=",
            required: "=required"
        },
        link: link,
        templateUrl: "smth.html"
    };
})

指令在表格中的用法:

                <form class="form-horizontal" name="smthForm">
                    <div class="row">...</div>
                    <smth label="'Birth date'" ng-model="data.birthdate" type="birthdate" required="true"></smth>
                </form>

当指令输入无效时，其外观会按预期更改.但是，保存指令的表单对它的有效性状态一无所知，而且我不知道如何使它手动工作.另一方面，表单以某种方式知道何时输入为空并变为无效(必需"参数起作用). 我尝试了几种基于$ setValidity("smth"，！scope.invalid)的方法，但是失败了，基本上我无法理解在我的自定义指令中哪个确切的实体必须具有$ invalid字段才能对其进行更改. 当内部指令无效字段为true时，我应该添加什么使表格变为无效?

When directive input is invalid, appearance of it changes as expected. However, the form that holds directive doesn't know anything about its validity state and I can't figure out how to make it work manually. On the other hand, form somehow knows when the input is empty and becames invalid ("required" param works). I tried several approaches based on $setValidity("smth", !scope.invalid), but failed, basically I can't understand what exact entity must have $invalid field in my custom directive to change it. What should I add for the form to become invalid when internal directive invalid field is true?

推荐答案

您可以使用ngModel验证器:

.directive("smth", function($rootScope) {
    var link = function(scope, element, attrs, ngModelCtrl) {

        // Add custom validator
        ngModelCtrl.$validators["timeString"] = function(modelValue) {
            return !$rootScope.timeStringValid(modelValue);
        }
    };
    return {
        restrict: "E",
        scope: {
            name: "=name",
            label: "=label",
            ngModel: "=",
            required: "=required"
        },
        // require ngModel controller
        require: "ngModel",
        link: link,
        templateUrl: "smth.html"
    };
});

这样，角度将包含对其$invalid属性和$errors(myForm.myFieldName.$errors.timeString)的验证错误

This way angular will include the validation errors to its $invalid property and the $errors (myForm.myFieldName.$errors.timeString)

这篇关于如何判断角形自定义指令无效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！