Angular 1.3 - 使用ngMessages进行仅数字验证

时间:2015-05-05 11:28:51

标签: javascript angularjs angularjs-directive

我在表单中使用ngMessages。我有一个字段,我希望用户只能插入数字。如果用户键入一些不是数字的字母(例如不是0-9),则字段中不会显示任何内容。 另外,我想使用ng-min和ng-max来验证插入的值。 所以我创建了一个指令但是为了使用ng-min和ng-max,我需要使用" type = number"这破坏了我的指示行为......

这是我的表格中的字段:

  <div class="field">
      <label for="age">insert your age</label>
      <input name="age"
                   ng-model="data.age"
                   ng-minlength="1"
                   ng-maxlength="2"
                   ng-min="10"
                   ng-max="80"
                   only-digits 
                   type="number"
                   required/>

      <div class="error-messages" ng-messages="userForm.age.$error">
            <div ng-message="required">You left the field blank...</div>
            <div ng-message="minlength">Your field is too short</div>
            <div ng-message="maxlength">Your field is too long</div>
            <div ng-message="min">You must be at least 10 years old!</div>
            <div ng-message="max">You must be less than 80 years old!</div>    
      </div>

  </div>

我的指示是:<​​/ p>

angular.module('directives').
directive('onlyDigits', function () {

    return {
        restrict: 'A',
        require: '?ngModel',
        scope: {
        },
        link: function (scope, element, attrs, ngModel) {
            if (!ngModel) return;
            ngModel.$parsers.unshift(function (inputValue) {
                var digits = inputValue.split('').filter(function (s) { return (!isNaN(s) && s != ' '); }).join('');
                ngModel.$setViewValue(digits, "");
                ngModel.$render();
                return digits;
            });
        }
    };
});

0 个答案:

没有答案