Question

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

Answer 1

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

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

＆＃13;

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);
        });
      });
    }
  }
}]);

＆＃13;

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 {}

SimpleForm验证和Angular

1 个答案: