首页 文章

Angular - 掩码输入，$解析器，$格式化程序和模式验证

提问于
浏览 次
1

在表单上，我们有一个使用jquery插件通过指令工作的屏蔽输入 .

这很好用 - 用户看到蒙面电话值（但只在焦点后），但我们需要有未制作的模型值而不是屏蔽（例如，如果我们输入电话 (123)456-78-90 ，我们必须将模型设为 1234567890 ，同时我们有在我们的领域 (123)456-78-90 看到 .

好的，我们将 ngModel.$parsers 添加到指令中 . 好吧，这样做很好 - 我们需要 .

.directive('phoneNumber', function() {
    return {
      restrict: 'A',
      require: 'ngModel',
      link: function($scope, element, attrs, ngModel) {

        $(element).mask('(999) 999-99-99');

        // view -> model
        ngModel.$parsers.push(function(value) {
          if (value) {
            return value.replace(/[^0-9]+/g, '');  
          }
        });

      }
    }
  });

但是当我添加验证规则时

<input type="text" class="form-control" 
    ng-model="phone" name="phone"
    phone-number
    ng-pattern="^\d+$"
    ng-maxlength="10"
    ng-minlength="10"
    placeholder="(999)999-99-99">

  • ng-pattern="^\d+$" 我得到有效的模式，确定，这有效

  • ng-minlength="10" 我得到有效的minlength，好吧，这也有效

  • ng-maxlength="10" 由于maxlength，我收到验证错误 . 在这种情况下，似乎验证使用（123）456-78-90值而不是1234567890 .

我的问题在这里：

  • 如何使用默认模型值获取屏蔽值（在开始时我得到1234567890而不是（123）456-78-90），我看到只有在字段获得焦点后才会显示屏蔽值

  • 如何通过屏蔽输入获得工作验证（ng-pattern，ng-min / maxlength）？

请参阅我的代码示例中的plnkr http://plnkr.co/edit/Kalv9N2bP27v1ENAfefb?p=preview

javascript angularjs angularjs-directive

1 回答

  • 0

    玩了一下之后好吧，我让它上班了：

    http://plnkr.co/edit/v9dvwaFzwOw4rkwhbMnM?p=preview

    情侣：

    • 我必须做$ scope . 如我在评论中所说，做面膜后申请

    • 自jQuery 's mask messes with the object'的值以来，我不得不对验证器做一个不那么漂亮的检查，但它可以工作:) .

    码：

    .directive('phoneNumber', function() {
    return {
      restrict: 'A',
      require: 'ngModel',
      link: function($scope, element, attrs, ngModel) {

        $scope.$apply();
        $(element).mask('(999) 999-99-99');


        // view -> model
        ngModel.$parsers.push(function(value) {
          if (value) {
            return value.replace(/[^0-9]+/g, '');  
          }
        });

      }
    }
  });

    HTML：

    <input type="text" class="form-control" 
    ng-model="phone" name="phone" phone-number >

<span class="text-danger" 
    ng-show="appForm.phone.$dirty && appForm.phone.$invalid || !phone">
    Incorrect phone value
</span>
    回复于

相关问题