Question

我有一个Angular JS应用程序，其中有一个必需的电话号码字段，以及一个国家/地区选择字段。国家/地区选择默认为美国。当所选国家/地区为美国或加拿大时，我想使用国内电话号码模式验证电话号码字段，但是当选择任何其他国家/地区时，我不想验证电话号码的模式。< / p>

为了实现这个所需的功能，我使用了类似this（脏方式）的解决方案。我会检查exist是requireTel还是countryCode，而不是检查USA布尔值，以确定是否使用我的电话号码模式进行验证。

此解决方案有效，但仅在您更改国家/地区后更改电话号码时才有效。例如，如果您选择了美国，并输入一个长的国际电话号码，例如CAN，它会使用国内电话号码验证并显示无效模式。但是当我更改时国家到巴哈马，它应该不再使用国内电话号码验证，无效模式消息应该消失。但是，在更改电话号码之前，仍会显示无效模式消息。一旦我更改了电话号码，该消息就会消失。

发生这种情况的原因是，在更改国家/地区选择时，不再对电话号码字段执行ng-pattern验证。有没有办法强制在更改国家/地区时重新评估ng-pattern验证？

请参阅下面的代码段以重现此问题。

＆＃13;

+441234567890

＆＃13;

var app = angular.module('example', []);

app.controller('exampleCtrl', function($scope) {
  $scope.countries = [{
    countryName: 'United States',
    countryCode: 'USA'
  }, {
    countryName: 'Canada',
    countryCode: 'CAN'
  }, {
    countryName: 'Bahamas',
    countryCode: 'BHS'
  }, {
    countryName: 'Chile',
    countryCode: 'CHL'
  }];

  $scope.selectedCountry = $scope.countries[0];

  $scope.phoneNumberPattern = (function() {
    var regexp = /^\(?(\d{3})\)?[ .\/-]?(\d{3})[ .-]?(\d{4})$/;
    return {
      test: function(value) {
        var countryCode = $scope.selectedCountry.countryCode;
        if (countryCode !== 'USA' && countryCode !== 'CAN') {
          return true;
        }
        return regexp.test(value);
      }
    }
  })();

});

＆＃13;

.error {
  color: red;
  font-style: italic;
}

＆＃13;

Answer 1

这是另一种解决方案。使用返回模式的函数。

jsfiddle上的实例。

angular.module('ExampleApp', [])
  .controller('ExampleController', function($scope) {
    $scope.countries = [{
      countryName: 'United States',
      countryCode: 'USA'
    }, {
      countryName: 'Canada',
      countryCode: 'CAN'
    }, {
      countryName: 'Bahamas',
      countryCode: 'BHS'
    }, {
      countryName: 'Chile',
      countryCode: 'CHL'
    }];

    $scope.selectedCountry = $scope.countries[0];
    var regUSA = /^\(?(\d{3})\)?[ .\/-]?(\d{3})[ .-]?(\d{4})$/;
    var regAll = /.*/;
    $scope.phoneNumberPattern = function() {
      var countryCode = $scope.selectedCountry.countryCode;
      if (countryCode !== 'USA' && countryCode !== 'CAN')
        return regAll;
      else
        return regUSA;
    }
  });

.error {
  color: red;
  font-style: italic;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
<div ng-app="ExampleApp">
  <div ng-controller="ExampleController">
    <ng-form name="exampleForm">
      <label>Country:</label>
      <select ng-model="selectedCountry" ng-options="country as country.countryName for country in countries">
      </select>
      <label>Phone:</label>
      <input type="text" ng-model="phone" name="phone" ng-pattern="phoneNumberPattern()" required>
      <small class="error" ng-show="exampleForm.phone.$error.pattern">Invalid pattern.</small>
      <small class="error" ng-show="exampleForm.phone.$error.required">Phone number is required.</small>
    </ng-form>
  </div>
</div>

注意：正则表达式变量在函数外声明是很重要的。如果您尝试按以下方式更改方法：

if (countryCode !== 'USA' && countryCode !== 'CAN') return /.*/; else return /^$?(\d{3})$?[ .\/-]?(\d{3})[ .-]?(\d{4})$/;

这将导致infinite $digest error。

Answer 2

这是解决问题的一种方法。

我基本上做的是在下拉列表中添加ng-change="changed()"。

<select ng-model="selectedCountry" ng-change="changed()" ng-options="country as country.countryName for country in countries">
    </select>

在JS中，我重置了输入文本框的值

 $scope.changed=function()
  {
    $scope.phone="";
  }

这会强制再次执行验证。

这是DEMO。

如果此解决方案适合您，请告诉我。

当另一个输入发生变化时强制进行ngPattern验证

2 个答案: