Проверка пользовательской формы AngularJS

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

Итак, у вас есть несколько незначительных ошибок в логике вашего кода для правильной работы этой функции.

Что вы пытаетесь сделать, это создать пользовательский валидатор .Ваша директива использует функцию $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 (как я обновил имя).