Question

我正在尝试使用$ valid类在表单上创建一个字段。我有下面的HTML和JS代码，但即使JS似乎通过修改代码编辑器工作，它也不验证HTML。它似乎没有这么做，所以只要字段中有任何文本，$ valid有效，但会变为真。

<input name="user" ng-model="user" ng-controller="SearchController"  placeholder="User ID" required><br>
<span style="color:red" ng-show="searchForm.user.$dirty && searchForm.user.$invalid">A valid user ID is required.</span>

和

var searchApp = angular.module('searchApp', []);

searchApp.controller('SearchController', ['$scope', function ($scope) {
    var users = ['11', '22', '33', '44']
    return {
        require: 'ngModel',
        link: function (scope, element, attr, mCtrl) {
            function idValidation(value) {
                if (users.includes(value)) {
                    mCtrl.$setValidity('charE', true);
                } else {
                    mCtrl.$setValidity('charE', false);
                }
                return value;
            }
            mCtrl.$parsers.push(idValidation);
        }
    };
}]);

JS逻辑似乎有效，但HTML无法正常工作。

Answer 1

因此，您的代码逻辑中存在一些小错误，无法正确使用此功能。

您尝试做的是创建custom validator。您的指令使用$parser函数，该函数用于解析模型的值以进行显示。你真正想做的是使用$validators函数。

所以，你想要做以下事情：

var searchApp = angular.module('searchApp', []);

searchApp.directive('validUser', ['$scope', function ($scope) {
    var users = ['11', '22', '33', '44']
    return {
        require: 'ngModel',
        link: function (scope, element, attr, mCtrl) {
            mCtrl.$validators.charE = function (value) {
                return users.includes(value)
            }
        }
    };
}]);

当ngModel更改时，会发生什么情况，它会通过验证程序运行值并确定它们是有效还是无效，并自动设置ng-invalid-{name}或ng-valid-{name}（在此示例中， ng-invalid-charE和ng-valid-charE）。

您可以使用ngMessages来定义错误，并根据相关性显示和隐藏错误。

您的ngController更有可能是一个指令，它会添加验证器和您的控制器以包含整个搜索功能/表单HTML，并高于您的输入以定义您的范围。将其更改为指令意味着您要从输入中删除ngController并为valid-user添加属性（因为我已更新了名称）。

AngularJS自定义表单验证

1 个答案: