SimpleForm 验证和 Angular答案

【问题标题】：SimpleForm validation and AngularSimpleForm 验证和 Angular
【发布时间】：2015-07-06 15:02:01
【问题描述】：

我们在我们的项目中使用简单的表单，现在我刚刚创建了一个表单，它作为角度模板加载。我也想使用角度处理验证，但从响应中获取错误。你知道任何准备好去处理简单形式的验证错误的角度指令吗？

【问题讨论】：

验证内置在角度形式中，除非您需要它无法处理的特定内容。很难说，因为您在这里问的内容有点宽泛 - 但您可以在此处查看内置验证 docs.angularjs.org/guide/forms

标签： ruby-on-rails angularjs validation ruby-on-rails-4 simple-form

【解决方案1】：

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

ng-minlength : 指定你想要的输入文本的最小长度
ng-maxlength : 指定你想要的输入文本的最大长度
ng-pattern : 指定要检查的 js 正则表达式以验证输入文本
如果你有一个 api 并且想在一个字段中获得一个唯一值而不是调整这个代码 sn -p

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

你也可以使用这些类名来格式化你的表单

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

【讨论】：