Автор оригинала: Sten Muchow.

Валидация формы «Угловой способ» является чрезвычайно мощным инструментом. У нас есть возможность пройти простое регулярное выражение к атрибуту NG-Pattern в поле ввода для простого ввода Валидация, или мы можем сделать наши собственные функции настройки, использующие NGModelController Отказ

Таким образом, вы можете думать о себе, да, но я уже могу использовать шаблон для проверки в HTML5. Правда, действительно, вы можете, но когда вы вместе все биты и кусочки вместе, и дайте углому сделать свою вещь, у вас есть полный инструмент, установленный в вашем распоряжении.

В этом посте я хочу показать, как мы можем использовать NGModelController В индивидуальной директиве проверки проверки любой логики.

Если вы посмотрите на Угловые документы на Ngmodel Директива, вы увидите это:

NGModel отвечает за:

• Привязка вида в модели, какие другие директивы, такие как входные, текстовые или выбор требуют.
• Обеспечение поведения валидации (то есть требуемое, номер, электронная почта, URL).
• Сохранение состояния контроля (действительный/недействительный, грязный/нетронутый, коснулся/нетронуты, ошибки проверки).
• Настройка связанных классов CSS на элементе ( NG-VALIUE , NG-Invalid , NG-deglic , NG-Vinistine , NG-Takeed , НГ-Нетронутый ), включая анимацию.
• Регистрация контроля со своей родительской формой.

Вы не сомневаетесь, уже используете этот маленький кусочек логики в вашем коде, и NG-модель Одной из первых частей мы изучаем, когда начинаем с угловой – введите повсеместную Здравствуйте, мир пример.

Hello {{ sometext }}
   

Верно. Это все, что есть к NG-модель Директива, легко забыть, что каждый кусок кода, который вы используете в доме от угловой, да, да, директивы.

Тем не менее, мы не заинтересованы в NG-модель Директива. Мы хотим опуститься и грязно с NGModelController , который предоставляет API для Ngmodel Директива.

Опять же, из документации:

NGModelController содержит услуги для связывания данных, проверки, обновления CSS и форматирование значений и анализа. Он целенаправленно не содержит никакой логики, которая занимается рендерингом DOM или прослушивания событий DOM. Такая логика DOM, связанная с другими директивами, которые используют NGModelController для связывания данных.

Итак, для того, чтобы использовать его, мы должны сказать, как говорят документы. Давайте создадим нашу собственную директиву, которая использует NGModelController Отказ

angular.module('PTTP.Directives.Validation', [])
  .directive('pttpValidator', function() {  
    return {        
      restrict: 'A',
      require: '?ngModel',
      link: linker,
      scope: {
        validateFunction: '&'
      }
    }
  });
    

Это основа дармы; Атрибут, который обладает изолирующим объемом, проходящим в ValidateFunction – достаточно просто.

Как насчет линкера? Ну, вот где реальный вкусно живут.

var linker = function(scope, element, attr, ngModelCtrl) {
        /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
                    ngModel Controller Utilization
     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  ngModelCtrl.$parsers.push(function (value) {
    //Fire our validator function returning a boolean
    var result = scope.validatorFunction({ 'value': value });
    //Check the result to make sure it returned boolean and not undefined or null
    if (result || result === false) {
      ngModelCtrl.$setValidity(attrs.validatorName, result);
      return result ? value : undefined;  //Pass the value down the pipeline - here*
    }
    //*Or here
    return value;
  });
};

Что такое здесь здесь? Итак, опять же, давайте разложим логическую линию по линии.

Для начала мы используем * P А R S е R S * P R o P е R T y T o P U S H А F U N C . T Я o N W Я T H А V А л U е P А R А м е T е R Отказ T H е ‘ Parsers * Свойство для толкания функции с параметром значения. ` P А R S е R S * P R o P е R T y T o P U S H А F U N C . T Я o N W Я T H А V А л U е P А R А м е T е R Отказ T H е ‘ Трубопровод Parsers просто – это массив функций, которые впоследствии называются, передавая их Возвращаемое значение к следующей функции. Вы можете думать об этом, как это:

ngModelCtrl.$parsers = [func1, func2, func3]; //Initial $parsers setup
ngModelCtrl.$parsers.push(func4); //Push a new function
console.log(ngModelCtrl.$parsers); //[func1, func2, func3, func4];

Так что каждый раз, когда Ngmodel Значение изменено, эта коллекция функций называется каждым передающим значением возврата к следующему. Довольно прямо вперед.

Из документов …

Для проверки анализаторы должны обновлять состояние действительности, используя $ SETVALIVE () и вернуть неопределенные для недопустимых значений.

Если мы рассмотрим глубже в прошедшую функцию, мы можем видеть сначала, мы присваиваем логическое значение для переменной результата. Итак, просто поставил, наш ValidatorFunction что мы проходим в возвращении либо правда или ложь Отказ Далее мы проверяем, если Результат определяется – либо правда или ложь Отказ Затем, основываясь на значении Результат мы называем $ sountvalitelity проезжая в Validatorname и логический результат. Наконец, мы Верните значение, передавая его на следующую функцию в трубопроводе.

Вот как мы потребляем директиву.

HTML

 
    
    
      Email
    
    
            
    
    
      Email Confirmation
    
    
    

    

Контроллер

angular.module('PTTP.Controllers.Form',[])
  .controller('FormController', function($scope) { 
    $scope.formElements = {
      email: '',
      emailConfirmation: ''
    };    
    $scope.checkEmailMatch = function(value) {
      return value === $scope.formElements.email;  
    };
  };
    

В HTML мы создали простую форму с Новалидиата Атрибут, чтобы остановить браузер от проверки самой формы, мы хотим угловой для этого для нас. Далее мы настроили два Поля ввода, которые оба ожидают типов электронных писем, второй из которых имеет наш PTTP-Validator Директива. Этот элемент имеет три атрибута, которые стоит упомянуть: Имя , Валидатор имя , Валидатор-Функция Отказ

Сначала – Имя – Это важный атрибут, как угловые использует его для ссылки на имя ввода. Я объясню его позже, но на данный момент просто убедитесь, что он существует.

Второй – Имя валидатора – Это имя класса Angular, добавит до ввода, когда вход является либо действительным, либо недействительным

Третье – Функция валидатора – Это живет за пределами объема этой директивы, что важно, поэтому директива остается универсальной и многоразовой. У нас есть FormController обертывая форму и Благодаря этому у нас есть доступ к своим определенным способам и переменным. В этом случае CheckeMailmatch метод.

$scope.checkEmailMatch = function(value) {
  return value === $scope.formElements.email;  
};
    

Это в значительной степени все, что есть к этому! Это основа использования NGModelController для формы проверки. Сейчас иди и проверяйте дерьмо outta yer forms!