Question

我有一个html表单，如下所示：

<div class="row col-lg-offset-3">
    <div class="form-group col-lg-6" ng-class="{ 'has-error': userForm.Age.$invalid && userForm.Age.$dirty}" show-errors >
        <label class="control-label">Age</label>
        <input type="text" class="form-control" name="Age" ng-model="user.Age" ng-required='!user.phonenumber' placeholder="Age"/>
    </div>
</div>

指令：

(function(){
    angular.module('myApp', [])
.controller('studentDataController', function($scope) {})
.directive('showErrors', function() {
    return {
      restrict: 'A',
      require:  '^form',
      link: function (scope, el, attrs, formCtrl) {

        var inputEl   = el[0].querySelector("[Age]");

        var inputNgEl = angular.element(inputEl);

        var inputValue = inputNgEl.attr('Age');

        var isValid = (inputValue >= 3 && inputValue < 100);

         inputNgEl.bind('blur', function() {
          el.toggleClass('has-error', isValid);
        })
      }
    }
  });
})();

我试图在Age字段模糊时验证输入.Age值应介于3到99之间。当用户完成输入并离开文本字段时，检查值是有效还是无效。然后如果值无效，应用has-class 该指令虽然不起作用。我错过了什么吗？

Answer 1

如果真的必须通过自定义指令这样做，请参阅下文：

var app = angular.module('app', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});

app
  .directive('ngAge', NgLength);

function NgLength() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function($scope, $element, $attrs, ngModel) {
      $scope.$watch($attrs.ngModel, function(value) {
        var isValid = (value > 3 && value < 100);
        ngModel.$setValidity($attrs.ngModel, isValid);
      });
    }
  }
}

/* Put your css in here */

.has-error {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="app">

  <form name="userForm" ng-class="{ 'has-error': userForm.Age.$invalid && userForm.Age.$dirty}">
    <label class="control-label">Age</label>
    <input type="text" class="form-control" name="Age" ng-model="user.Age" ng-age placeholder="Age" />

  </form>
</body>

Answer 2

AngularJS 1.3.x引入了$validators pipeline - 用它们编写自定义验证规则要简单得多。

模型值更改时应用的验证程序集合。对象中的键值是指验证器的名称，而函数是指验证操作。验证操作以模型值作为参数提供，并且必须根据验证的响应返回true或false值。

＆＃13;

var app = angular.module('app', []);

app
  .controller('MainCtrl', function($scope) {
    $scope.name = 'World';
  }).directive('ngAge', function NgLength() {
    return {
      restrict: 'A',
      require: 'ngModel',
      link: function($scope, $element, $attrs, ngModel) {
        ngModel.$validators.validAge = function(modelValue, viewValue) {
          var age = modelValue || viewValue;
          return age > 3 && age < 100
        };
      }
    }
  });

＆＃13;

.has-error {
  background-color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
<body ng-app="app">
  <form name="userForm" ng-class="{ 'has-error': userForm.Age.$invalid && userForm.Age.$dirty}">
    <label class="control-label">Age</label>
    <input type="text" class="form-control" name="Age" ng-model="user.Age" ng-age placeholder="Age" />
  </form>
</body>

＆＃13;

Answer 3

您可以使用max，min指令。请在下面示例

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

.has-error {
  background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
 <link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<html ng-app="plunker">



<body>

  <div class="row col-lg-offset-3">
    <form name="userForm" class="form-group col-lg-6" ng-class="{ 'has-error': userForm.Age.$invalid && userForm.Age.$dirty}" show-errors>
      <label class="control-label">Age</label>
      <input type="number" class="form-control" name="Age" ng-model="user.Age" ng-required='!user.phonenumber' placeholder="Age" max="100" min="3" />
   
  </form>
  </div>

AngularJS - 编写自定义指令以验证传递的值

3 个答案: