Проверка SimpleForm и Angular

Question

Проверка SimpleForm и Angular

0

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

ciembor 06 июль 2015, в 17:47

Источник

Теги:

angularjs

ruby-on-rails

validation

simple-form

ruby-on-rails-4

1 ответ

Ещё вопросы

Yashdeep Hinge · Accepted Answer · 2015-07-06T14-07-00.000Z

Вот стратегия проверки формы для угловых форм:

ng-minlength: укажите минимальную длину вводимого текста
ng-maxlength: укажите максимальную длину вводимого текста
ng-pattern: указать регулярное выражение js для проверки ввода текста
если у вас есть api и вы хотите получить уникальное значение в поле, чем настраивать этот фрагмент кода

var app = angular.module('validationExample', []);

app.directive('ensureUnique', ['$http', function($http) {
  return {
    require: 'ngModel',
    link: function(scope, ele, attrs, c) {
      scope.$watch(attrs.ngModel, function() {
        $http({
          method: 'POST',
          url: '/api/check/' + attrs.ensureUnique,
          data: {'field': attrs.ensureUnique}
        }).success(function(data, status, headers, cfg) {
          c.$setValidity('unique', data.isUnique);
        }).error(function(data, status, headers, cfg) {
          c.$setValidity('unique', false);
        });
      });
    }
  }
}]);

var app = angular.module('validationExample', []);

app.directive('ensureUnique', ['$http', function($http) {
  return {
    require: 'ngModel',
    link: function(scope, ele, attrs, c) {
      scope.$watch(attrs.ngModel, function() {
        $http({
          method: 'POST',
          url: '/api/check/' + attrs.ensureUnique,
          data: {'field': attrs.ensureUnique}
        }).success(function(data, status, headers, cfg) {
          c.$setValidity('unique', data.isUnique);
        }).error(function(data, status, headers, cfg) {
          c.$setValidity('unique', false);
        });
      });
    }
  }
}]);

Таким образом вы можете получить доступ к полям формы

formName.inputFieldName.property

Вы можете проверить, затронута ли форма пользователем или нет

formName.inputFieldName.$pristine;

Вы можете проверить, затронута ли форма пользователем пользователем, или нет напротив $ нетронутой

formName.inputFieldName.$dirty

Вы можете проверить, действительна ли форма или нет.

formName.inputFieldName.$valid

Его противоположность $ valid

formName.inputFieldName.$invalid

вы также можете форматировать форму, используя эти имена классов

.ng-pristine {}
.ng-dirty {}
.ng-valid {}
.ng-invalid {}