Question

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

这很好用 - 用户看到蒙面电话价值（但只在焦点后），但我们需要有未制作的模型值而不是屏蔽（例如，如果我们输入手机（123）456-78-90 < / strong>我们必须将模型设为 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

夫妻俩：

我必须做$ scope。如我在评论中所说的那样，在做面具后申请。
由于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>

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

1 个答案: