Question

我正在尝试创建一个可重用的指令，它只是根据一个子节点的$invalid属性向一个元素添加一个类。

我开始创建指令，但不确定如何访问$invalid道具：

简化标记：

<form>
    <div class="group" ng-validate="emailAddress">
        <div class="wrapper">
            <input type="email" name="emailAddress" ng-model="emailAddress" required/>
        </div>
    </div>
</form>

指令：

function ngValidate ()
{
    function linkFunction (scope, element, attributes, controller)
    {
        var el = element[0];
        var targetElName = attributes.ngValidate;
        var $targetEl = angular.element(el.querySelector("[name='" + targetElName + "']"));

        $targetEl.on("blur", blurHandler);

        function blurHandler (event)
        {
            console.log($targetEl.$invalid); // always undefined??

            // what I want to happen (sudo code):

            // if $targetEl is $invalid then add class 'error' to element.
            // if $targetEl is $valid then add class 'success' to element.
        }
    }

    return {
        restrict: "A",
        link: linkFunction
    };
}

我对此感到有点困惑，所以任何帮助都会受到赞赏。

Answer 1

试试这个：

<form name="myform">
    <div class="group" ng-validate="emailAddress">
        <div class="wrapper">
            <input type="email" name="emailAddress" ng-model="emailAddress" ng-class="{ 'bademail' : myform.email.$invalid }" required/>
        </div>
    </div> </form>

您也可以在CSS中指定.group input[type=email] .ng-invalid { color: red; }（ng-invalid会自动添加为类）。

有关此处所有FormController属性的更多信息：

https://docs.angularjs.org/api/ng/type/form.FormController

Answer 2

感谢@ Ghan建议使用类名，我现在已经创建了一个工作指令来封装逻辑：

示例标记（将值更改为＆＃39;姓氏＆＃39;以避免混淆）：

<form>
    <div class="group" ng-validate="surname">
        <div class="wrapper">
            <input type="text" name="surname" ng-model="surname" required/>
        </div>
    </div>
</form>

工作指令：

function ngValidate ()
{
    function linkFunction (scope, element, attributes, controller)
    {
        var el = element[0]; // grab the DOM element from the angular/jQuery element.
        var targetElName = attributes.ngValidate;
        var $targetEl = angular.element(el.querySelector("[name='" + targetElName + "']"));

        $targetEl.on("blur", blurHandler);

        function blurHandler (event)
        {
            if ($targetEl.hasClass("ng-invalid"))
            {
                // add remove success class and error class.
                element.removeClass("form-controlGroup--success").addClass("form-controlGroup--error");
            }
            else if ($targetEl.hasClass("ng-valid"))
            {
                // add remove error class and success class.
                element.removeClass("form-controlGroup--error").addClass("form-controlGroup--success");
            }
        }
    }

    return {
        restrict: "A",
        link: linkFunction
    };
}

Answer 3

Angular内置了电子邮件验证程序。您可以使用formName.fieldName.$error.email检查它是否有效。但是，如果你只是想弄清楚基本的验证概念那么。
您将指令应用于div，但我认为您必须将其应用于输入
您必须使用ngModel $validators或$parsers进行广告验证。因为$invalid只是ngModel

```

<form name="myForm">
    <div class="group">
        <div class="wrapper">
            <input type="email" ng-validate="emailAddress" name="emailAddress" ng-model="emailAddress" required/>
            <div class="error" ng-show="myForm.emailAddress.$error.myemail" >Email is not correct</div>
        </div>
    </div>
</form>

```

现在您创建验证指令。

function ngValidate ()
{
    function linkFunction (scope, element, attributes, controller)
    {
        controller.$parsers.push(function(value){
            if(!value || value.length == 0) return;

            controller.$setValidity('myemail', true);

            switch(scope.ngValidate) {
                case 'emailAddress':
                    if(!value.match(/email regex/g)) {
                        controller.$setValidity('myemail', false);
                    }
                break;
            }
        });
    }

    return {
        restrict: "A",
        require: 'ngModel',
        scope: {
            'ngValidate': '@'
        },
        link: linkFunction
    };
}

使用此功能，您还可以使用ngMessages。

一般情况下，我会建议搜索谷歌 Angularjs验证。你可以在那里学到很多东西。

<强>更新

如果您只想根据字段的验证将类添加到包装器。

<div class="group" ng-class="myClass(myForm, 'emailAddress')">

现在在控制器中

$scope.myClass = function(form, name) {
    var error = !angular.equals({}, form[name].$error);

    if(form[name].$dirty && !error) {
        return 'has-success'
    }
    if((form[name].$dirty || form.$submitted) && error) {
        return 'has-error'
    }
}

如果字段中至少有一个错误，则会添加类has-error，如果没有错误，则会添加has-success。

访问儿童无效＆＃39;指令中的验证支柱

3 个答案: