SimpleForm 验证和 Angular

Question

我们在项目中使用简单的表单，现在我刚刚创建了一个作为 angular 模板加载的表单。我还想使用 angular 处理验证，但会从响应中获取错误。您知道任何现成的 angular 指令来处理简单形式的验证错误吗？

Answer 1

以下是 angularjs 表单的表单验证策略：

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;

您可以检查表单是否被用户触摸或不在 $pristine 对面

formName.inputFieldName.$dirty

您可以检查表格是否有效

formName.inputFieldName.$valid

与 $valid

相反

formName.inputFieldName.$invalid

您还可以使用这些 class 名称格式化您的表单

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

SimpleForm 验证和 Angular

SimpleForm validation and Angular

validation

ruby-on-rails

simple-form

angularjs

ruby-on-rails-4