AngularJS и правила повторного использования, принудительные правила проверки полей

Question

Мне нужно разработать классическое, основанное на форме рабочее веб-приложение.

Каждая форма содержит некоторые элементы управления, в основном элементы управления вводом. Многие из этих элементов управления имеют правила проверки или поведения, некоторые правила действительны только для одного элемента управления (независимые проверки), а некоторые зависят от значений других элементов управления (зависимых проверок).

Кроме того, некоторые элементы управления имеют одинаковое семантическое значение в разных формах.

Например, поле ввода «имя клиента» должно всегда иметь максимальную длину 50 символов и делиться между различными формами. Другим примером является то, что поле со списком «документы» фильтруется на основе поля возраста (то есть: у клиента с менее чем 18-летним периодом имеются разные документы). Если в этом комбо есть нулевые документы, он должен полностью исчезнуть.

Правила должны быть централизованы и использованы повторно. Хотя я могу определять правила в функциях, содержащихся в контроллерах, я не хочу, чтобы программист , чтобы добавить правило проверки для определенного поля, потому что я уверен, что он этого не сделает.

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

Я смотрел угловые пользовательские директивы, но я не уверен, что это правильный способ реализовать такую ​​вещь. Это, безусловно, работает, но я хотел бы знать, как определить правила кросс-поля и обеспечить их использование.

Например, используя пользовательские директивы myCustomerName для имени поля клиента:

app.js уаг MYAPP = angular.module ("MyApp", []);

myApp.directive("myCustomerName", 
    function() 
    { 
     return 
     { 
      restrict: 'E', 
      templateUrl: 'customer_name.html' 
     }; 
    } 
); 

customer_name.html

<div class="form-group"> 
    <label for="customerName">Customer Name</label> 
    <input type="text" class="form-control" id="customerName" ng-model="customerName"> 
</div> 

и т.д., но тогда у меня нет правил кросс-проверки!

я мог бы вместо того, чтобы определить более общую пользовательскую директиву:

myApp.directive("ufeCheck", 
    function() 
    { 
     return { 
      restrict: 'E', 
      templateUrl: function(e, attr) { 
       return attr.type + '.html'; 
      } 
     }; 
    } 
); 

И затем использовать его в HTML, как:

<ufe_check type="customer_name"></ufe_check> 
<ufe_check type="customer_age"></ufe_check> 

Но, Где бы я поставил перекрестную проверку поля? Как загрузить правила, определенные сервером?

Я думаю, что мне нужен пользовательский интерфейс для выполнения правил, клиентская поддержка и проверка соответствия форматов AngularJS.

Я смотрел Valdr: https://github.com/netceteragroup/valdr И это хорошо, но правила определены только в клиенте и не являются поперечным полем.

Answer 1

Это очень распространенная проблема, и я не уверен, есть ли продукт на полке, который решает все ваши проблемы.в первую очередь: вы не можете просто повторно использовать свой код проверки на бэкэнд и интерфейс, потому что это две аналогичные, но разные проверки. например, поле «повторить пароль» не требуется в остальном api. другой пример: captcha не должен быть проверен на интерфейсе.

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

на сервере я бы не хранил правила/dsl, я бы просто повторно использовал код js из внешнего интерфейса и запустил этот код на бэкэнд (узел или другое время выполнения js). если вы используете свой собственный dsl, всегда будет случай, который не поддерживается вашим dsl. правила могут быть очень сложными, поэтому легче иметь полный язык программирования, а не искусственно созданный dsl на лету.

Однако я не знаю, как можно «принудить» программиста использовать его. всегда будет проще просто добавить новое поле с обязательным маркером, а не искать базу кода или документацию для чего-то похожего на то, что ему нужно. один из способов, я могу думать о том, чтобы иметь некоторые тесты/анализатор кода, который утверждает, что в какой-либо папке нет никакой специальной проверки, и что каждое поле прикрепляет один из ваших настраиваемых валидаторов/маркеров. но я не уверен, что это будет удобно всем остальным разработчикам.

Answer 2

Вы можете создать политику по углу, чтобы поместить вызовы на сервер для проверки данных. Большим преимуществом такого подхода является централизация валидации в одном месте. Я даже не пойду по достоинству преимуществ пребывания в одном месте правил и валидаций. Например, вы можете использовать класс ValidateData в бэкэнд.

Существует api с углом, который делает это. https://github.com/webadvanced/ng-remote-validate. Использование очень просто, посмотрите:

<!-- This defined input for validation with context for this ng-remote-validate--> 
<input type="password" 
     name="currentPassword" 
     placeholder="Current password" 
     ng-model="password.current" 
     ng-remote-validate="/customer/validpassword" 
     ng-remote-throttle="550" 
     ng-remote-method="GET" 
     required> 

<!-- This defined input for validation with context for this ng-remote-validate--> 
<input type="text" 
     name="email" 
     placeholder="Email address" 
     ng-model="email" 
     ng-remote-validate="[ '/customer/email-registered', '/customer/email-restricted' ]" 
     ng-remote-throttle="800" 
     ng-remote-method="POST" 
     required> 

<!-- This wait validation --> 
<span class="message" ng-show="myForm.inputName.$pending">validating...</span> 

<!-- This submit form an run validation --> 
<button type="submit" ng-disabled="myForm.$invalid || myForm.$pending" ng-click="...">Go!</button>