javascript - Angular — 屏蔽输入、$parsers、$formatters 和模式验证

Question

在表单上，​​我们有一个屏蔽输入，可以使用 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

Answer 1

好吧，玩了一会后，我就开始工作了:

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

几件事:

1. 按照我在评论中所说，我必须在执行 mask 之后执行 $scope.$apply
2. 由于 jQuery 的掩码与对象的值混淆，我不得不对验证器进行不太漂亮的检查，但它有效:)。

代码:

 .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>