在 angular 中创建自定义字段验证

Question

我有以下 code/plunkr 并且出于某种原因 form.name.$invalid 始终为真（请参阅输入框后面的跨度）。 Angular 的文档并没有详细说明 $invalid 值是如何设置的。我有一种预感，它与 javascript 中的某些东西有关我有 ctrl.$error.taken = true/false 并且只是在 $error 对象上有一个对象将 $invalid 设置为 true。知道 angular 如何在幕后工作的人可以帮助我吗？

如果名称与正则表达式不匹配，我希望显示 "Name must be alpha-numeric" 错误，但如果名称是列表中的一个，我希望显示 "Name is already taken" 错误。如果该字段是这两个错误之一，我还会显示文本 "error"。除了始终显示单词 "error" 之外，所有这些都有效。我正在尝试遵循 angular 的使用 $invalid.

的标准

查看：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-forms-async-validation-production</title>


  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
  <script src="script.js"></script>
</head>
<body ng-app="form-example1">
  <form name="form" class="css-form" novalidate>
  <div>
    Username: 
    <input type="text" ng-model="name" name="name" username /> 
        <span ng-show="form.name.$invalid">error</span>
    <br />{{name}}<br />
    <span ng-show="form.name.$error.badContent">Name must be alpha-numeric</span>
    <span ng-show="form.name.$error.taken">Name is already taken!</span>
  </div>
</form>
</body>
</html>

脚本：

(function(angular) {
  'use strict';
var app = angular.module('form-example1', []);

var NAME_REGEXP = /^([a-zA-Z0-9])*$/;
app.directive('username', function() {
  return {
    require: 'ngModel',
    link: function(scope, elm, attrs, ctrl) {
      var names = ['Jim', 'John', 'Jill', 'Jackie'];

      ctrl.$validators.username = function(modelValue, viewValue) {
        if (ctrl.$isEmpty(modelValue)) {
          return true; // consider empty model valid
        }

        ctrl.$error.taken = names.indexOf(modelValue) > -1;
        ctrl.$error.badContent = !NAME_REGEXP.test(modelValue);

        return !ctrl.$error.taken && !ctrl.$error.badContent;
      };
    }
  };
});
})(window.angular);

笨蛋： https://plnkr.co/edit/LBRR14PpjAQigafOVTgQ?p=preview

Answer 1

使用单独的指令，一个用于验证字母数字，另一个用于用户名已被采纳。
$ctrl.validators.alphaNumeric 在 FormController 上公开 $error.alphaNumeric。您不必操纵 $error.xxx 上的值，它会根据验证器的 return 值自动设置。
请检查plunkr。
另请参阅https://code.angularjs.org/1.5.8/docs/api/ng/type/ngModel.NgModelController 虽然我还没有验证这一点，但我相信你现在应该有 ng-invalid-alpha-numeric 错误 class，因为现在 form.$error.alphaNumeric 已设置。

JS

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

app.controller('MainCtrl', function($scope) {
  $scope.model = {};
});

app.directive('validateAlphaNumeric', function () {

  var REGEX = /^([a-zA-Z0-9])*$/;

  return {
    require: 'ngModel',
    link: function (scope, element, attrs, ctrl) {

      ctrl.$validators.alphaNumeric = function (modelValue, viewValue) {

    if (REGEX.test(viewValue)) {
      return true
    }
    return false;
      };

    }
  };
});

app.directive('validateUserNotTaken', function () {

  return {
    require: 'ngModel',
    link: function (scope, element, attrs, ctrl) {
      var names = ['Jim', 'John', 'Jill', 'Jackie'];
      ctrl.$validators.userNotTaken = function (modelValue, viewValue) {

    if (names.indexOf(modelValue) == -1) {
      return true
    }
    return false;
      };

    }
  };
});

HTML

<body ng-controller="MainCtrl">
    <form name="myForm">
      <input type="text" validate-alpha-numeric validate-user-not-taken ng-model="model.value1">
      <p ng-if="myForm.$error.alphaNumeric">Should be alphanumeric</p>
      <p ng-if="myForm.$error.userNotTaken">User Exists!</p>
      <p ng-if="myForm.$error.alphaNumeric || myForm.$error.userNotTaken">Error</p>
     </form>
  </body>

Working plunkr: https://plnkr.co/edit/MZ7DMW?p=preview

在 angular 中创建自定义字段验证

Creating custom field validation in angular

angularjs

angularjs-directive

angular-directive