WedX - журнал о программировании и компьютерных науках

Аргументы сообщения директивы проверки AngularJS

Допустим, нам нужен собственный валидатор Angular, который предоставляет аргументы для сообщения об ошибке. Например, если бы мы создали валидатор, который оценивал бы минимальную длину массива, и когда он был бы недействителен, сообщение должно было быть "Минимальная длина равна {0}".

Теперь, учитывая, что мы создали пользовательскую директиву (как показано ниже) для этой проверки, как мы можем предоставить аргумент "{0}" из функции директивы проверки в сообщение проверки?

Вот пользовательская директива проверки для этого:

.directive('arrayLength', function () {
    return {
        require: 'ngModel',
        link: function (scope, elm, attrs, ctrl) {
            ctrl.$validators.arrayLength = function (modelValue, viewValue) {
                return modelValue >= parseInt(attrs.arrayLength);
            };
        }
    };
});

И здесь, где мы будем объявлять сообщение:

.run([
    'defaultErrorMessageResolver',
    function (defaultErrorMessageResolver) {
        defaultErrorMessageResolver.getErrorMessages().then(function (errorMessages) {
            errorMessages['arrayLength'] = 'Minimum length is {0}';
        });
    }
]);

Итак... есть идеи?

Я уверен, что это не ракетостроение. Просто я новичок в Angular.

Заранее спасибо.

javascript validation angularjs
09.10.2015

  • Плункер или jsfiddle для использования работающего кода? 10.10.2015
  • да. Вот скрипт: jsfiddle.net/4tsc7gcf/14 Просто нажмите GO!! и обратите внимание на отображаемое сообщение. аргумент {0} пуст. 10.10.2015

Ответы:


1

Смотри это. Может передать сообщение по собственной политике ("messageerror")

var app = angular.module("myApp", []);

function Fiddle($scope) {}

app.directive('input', function() {
    return {
        restrict: 'E',
        scope: {
            minlength: "@minlength"
        },
        link: function(scope, elm, attr, ctrl) {
            
            elm.bind('keyup', function() {
                var valid = (this.value && this.value.length >= scope.minlength);
                if (!valid){
                    if(elm.parent().find("span").length == 0)
                        elm.parent().append("<span style='border:solid 3px #FE2E2E'>Min is " + scope.minlength + "</span>");
                }else
                    elm.parent().find("span").remove();
            });
        }
    };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<form name="myForm" novalidate ng-app="myApp">
  <ul ng-controller="Fiddle">
    <li>
      <label for="barthirty">Min 3 Char:</label>
      <input input-data type="datetime" ng-model="nmTest" minlength="3"/>

    </li>
  </ul>
</form>

09.10.2015
  • не уверен, понял ли я ваш код, но мне кажется, что он передает не аргумент, а вместо этого все сообщение. Если да, то это не то, что я ищу. 10.10.2015
  • Я передаю ошибку mensageerror в код для демонстрации работы с параметрами в директиве. Посмотри сейчас! В примере параметр используется для проверки и отображения сообщения. 10.10.2015
  • Я ценю ваш ответ, но все же... не то, что мне нужно. Ваше решение работает, но не предоставляет необработанное сообщение. Вместо этого он добавляет HTML. Я предоставил скрипт ( jsfiddle.net/4tsc7gcf/14 ), чтобы он лучше представление о том, что я ищу. Большое спасибо! 11.10.2015
  • Эй, чувак, я смотрю твое предложение в jsfiddle, но твоя идея состоит в том, чтобы использовать фабрику для создания «данных валидатора». Верно, возможно, однако это странно и не является распространенным явлением. Фабрика используется для создания служб, общих и совместно используемых с контроллерами. Одним из примеров является сервисный уровень службы доступа. Для проверки элементов в поле зрения обычно используется директива, верно? Затем вы можете использовать одну директиву для проверки нескольких полей. Таким образом, вы используете атрибут в поле для проверки и отображения ошибки сообщения. 11.10.2015
    • Новые материалы
    Как создать диаграмму градиентной кисти с помощью D3.js
    Резюме: Из этого туториала Вы узнаете, как добавить градиентную кисть к диаграмме с областями в D3.js. Мы добавим градиент к значениям SVG и применим градиент в качестве заливки к диаграмме с..
    Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что это выглядит сложно…
    Просто начните и учитесь самостоятельно Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что он кажется мне сложным, и я бросил его. Это в основном инструмент..
    Лицензии с открытым исходным кодом: руководство для разработчиков и создателей
    В динамичном мире разработки программного обеспечения открытый исходный код стал мощной парадигмой, способствующей сотрудничеству, инновациям и прогрессу, движимому сообществом. В основе..
    Объяснение документов 02: BERT
    BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..
    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..
    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..
    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..
    Для любых предложений по сайту: [email protected]