Валидация форм в AngularJS

[AmdY]

Может подбросите материалы, как правильно связывать клиентскую валидацию с серверной, например, капча. Как раз по работе столкнулись.

[Maxkn]

делаете сервис, который общается с бэкендом, сервис через DI инджектится в контроллеры.
контроллеры на изменение модели дергают сервис

вот тут можно массу примеров найти

[Maxkn]

разве angular не поддерживает nested формы by design?

+ мне кажется, отображение сообщений о невалидности лучше делать через ng-show | ui-if.

[aav]

Извините, я не очень понял к какой части моего поста относится Ваш комментарий. Про ngForm я в явном виде писал. В демо примерах для отображения сообщений о невалидности и используется ngShow.

Если Вы про последнюю часть поста, то там основной момент в том, чтобы вложенная форма не влияла на валидность родительской.

[KhodeN]

К сожалению валидация срабатывает сразу. Зачастую бесит. Только открыл форму, а она уже невалидна (классы навешиваются и состояние полей и самой формы проставляются) Или может я еще не разобрался целиком, как знать(

[aav]

Для этого в AngularJS есть состояния dirty/pristine. Они выражаются в двух видах:

• css классы ng-dirty и ng-pristine;
• свойства для именованных форм и элементов управления, например, myForm.$pristine, myForm.$dirty, myForm.myPassIput.$pristine, myForm.myPassInput.$dirty.

[Makito]

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

[aav]

Что Вы подразумеваете под «отменить валидацию формы»? В принципе в NgModelController есть $setValidity. Если его переопределить в пустую функцию, то информация о валидности по идее никуда не пойдет.

[Makito]

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

[aav]

Сейчас в стандартной поставке — нет.
Но есть такие задачи:
github.com/angular/angular.js/issues/583 (нет никаких проблем самостоятельно реализовать необходимое состояние по аналогии — в проекте, в котором я сейчас работаю, мы так и сделали)
github.com/angular/angular.js/pull/2129

[Indeego]

Не помешал бы пример валидации с использованием сервиса.

[aav]

Не очень понял Вашу мысль — а какие нюансы Вы тут видите? Вы в сервис хотите вынести код валидации, который потом будет использоваться не только в директиве-валидаторе, но и еще где-то?

[Indeego]

Я рассматриваю пример, когда в сервисе используется ngResource с кастомными методами, а в директиве как раз таки происходит обращение к сервису. Самый типичный пример — валидация email при регистрации нового пользователя. Т.е. пользователь вводит свой эл.адрес, директива видит изменения, опрашивает внутренний метод, который в свою очередь делает запрос на сервер:

angular.module('fs.directives', [])
        .directive('validEmail',['UInput',function(service){

            var isValid = function(s) {
         
                service.check({email:s},function(out){
                    return out.request; 


                }); //не рабочий вариант, функция isValid возвращает объект ресурса а не булев результат из ответа



            };
            return {
                require:'ngModel',
                link: function(scope,elm,attrs,ngModelCtrl)
                {
                    ngModelCtrl.$parsers.unshift(function (viewValue) {
                        ngModelCtrl.$setValidity('validEmail', isValid(viewValue));
                        return viewValue;
                    });

                   ngModelCtrl.$formatters.unshift(function (modelValue) {
                        ngModelCtrl.$setValidity('validEmail', isValid(modelValue));
                        return modelValue;
                    });
                }


            }


        }]);

На самом деле это можно проще все сделать, но я решил начать с сложного :)

[aav]

Как proof-of-concept: jsfiddle.net/xAxud/
ngResource по-моему тоже promise-подобный объект возвращает. Так что там по аналогии должно быть. Я как-то чаще с чистым $http работаю.

[Indeego]

Спасибо за пример, вот и я склоняюсь к варианту с $http

[aesamson]

Можно создавать иерархии форм

Вложенные формы стандартом HTML не допускаются.

[aav]

А Вы это предложение до конца дочитали? На ссылку ngForm кликнули?

[aesamson]

Ok, посмотрел, спс. Думаю стоит поправить текст и указать в нем про это нововведение, чтобы не сбивать с толку читателя.

[STEVER]

Скажите пожалуйста, а почему в первом примере вместо свойства $validators были использованы $parsers и $formatters?

[aav]

Потому что на момент написания статьи $validators еще не существавало. Этот механизм был добавлени только в 1.3.

[STEVER]

благодарю за разъяснение, почему-то думал что опция $validators раньше появилась