Хранение Угловая форма проверки DRY

Question

У меня есть форма, которая может содержать 15-20 полей. Каждый из них содержит атрибут, который выглядит примерно так:

ng-class='addressForm.city.$invalid && addressForm.city.$touched ? "error" : ""' 

Так у меня есть, что длинная строка кода повторяется 15-20 раз. Это заставляет мои сухие будильники отключиться от большого времени.

Я мог бы разработать свой собственный способ сделать это более сухим, но я не хочу изобретать колесо. Есть ли приемлемый gererally способ держать Угловую форму валидации СУХОЙ?

Answer 1

Если это просто стиль, используйте CSS.

Угловой будет добавлять .ng-invalid и .ng-touched для ввода недопустимых и косвенных элементов.

Или вы можете обернуть все это в директиве что-то вроде

angular.module('module').directive('errorClass', function(){ 
    return{ 
     require: 'ngModel', 
     link: function(scope, el, attr, model) { 
      function setClass() { 
       if(model.$touched && model.$invalid) { 
        if(!el.hasClass('error')) { 
         el.addClass('error'); 
        } 
       } else { 
        el.removeClass('error'); 
       } 
      } 

      scope.$watch(function(){ return model.$touched; }, setClass); 
      scope.$watch(function(){ return model.$invalid; }, setClass); 
     } 
    } 
}); 

Также я havn't фактически использовал эту директиву, поэтому может потребоваться некоторые настройки.

Answer 2

Как сказал @lain, вам не нужно добавлять еще один класс (например, error), если поле недействительно, Angular добавляет, что для вас по умолчанию это просто имя, которое отличается (ng-invalid). Вы можете видеть, как это используется here (официальный пример формы из углового).

Если вы все еще хотите сделать это на своем пути, это реализация моего последнего комментария, используя директиву ngChange.

HTML-:

<input type="text" ng-model="addressForm.city" required ng-change="fieldChanged(this, 'city')"> 

Событие изменения:

$scope.fieldChanged = function(el, fieldName){ 
    if($scope.addressForm[fieldName].$invalid && $scope.addressForm[fieldName].$touched) angular.element(el).addClass('error'); 
    else angular.element(el).removeClass('error'); 
} 

Это не хорошая практика (для манипулирования DOM в контроллере), вы должны осуществить это в директиве, но связывание директива для каждого поля добавит наблюдателей, и я лично стараюсь избегать как можно большего использования слишком большого количества наблюдателей.

Более элегантным вариантом было бы объединить это ngChange с ngClass или просто пойти с помощью этой простой манипуляции с DOM в контроллере. Это ваш выбор :)

Answer 3

В итоге я создал свою собственную директиву для этого.Я считаю, что следующая директива, когда применяется, будет вести себя эквивалентно следующему:

form(name='addressForm') 
    input(
    type='text' 
    name='city' 
    ng-class='addressForm.city.$invalid && (addressForm.city.$touched || addressForm.$submitted) ? "error" : ""' 
) 

Вместо того, чтобы все, что я могу сделать:

form(name='addressForm') 
    input(
    type='text' 
    name='city' 
    validate-for='addressForm' 
) 

директива будет проверять действительность на:

• Blur
• Форма представления
• Изменение стоимости

Вот код (ES6):

'use strict'; 

class ValidateFor { 
    constructor() { 
    this.restrict = 'A'; 
    this.require = 'ngModel'; 

    this.link = ($scope, $element, $attrs, ngModel) => { 
     var form = $scope[$attrs.validateFor]; 
     var field = form[$element.attr('name')]; 

     $scope.$on('form-submitted',() => { 
     this.checkForErrors(field, $element); 
     }); 

     $scope.$watch(() => ngModel.$modelValue,() => { 
     if (field.$touched) { 
      this.checkForErrors(field, $element); 
     } 
     }); 

     $element.bind('blur',() => { 
     this.checkForErrors(field, $element); 
     }); 
    }; 
    } 

    checkForErrors(field, $element) { 
    if (field.$invalid) { 
     $element.addClass('error'); 
    } else { 
     $element.removeClass('error'); 
    } 
    } 
} 

ValidateFor.$inject = []; 

Вы могли бы даже устранить необходимость подачи имя формы в validate-for. Я просто сделал это, потому что у меня есть ситуации с вложенными формами.

Answer 4

valdr выглядит великолепно. Я еще не использовал его, но я попробую его, и он обновит это сообщение позже.