0

必須の電話番号フィールドと国の選択フィールドがある Angular JS アプリケーションがあります。国選択のデフォルトは米国です。選択した国が米国またはカナダの場合、電話番号フィールドを国内の電話番号パターンで検証したいのですが、他の国を選択した場合、電話番号のパターンを検証したくありません。

この目的の機能を実現するために、これと同様のソリューションを使用しました(汚い方法)。requireTelブール値をチェックする代わりに、countryCodeが または であるUSAかどうかをチェックCANして、電話番号パターンで検証するかどうかを決定します。

この解決策は機能しますが、国を変更した後に電話番号を変更した場合に限ります。たとえば、米国を選択して、 のような長い国際電話番号を入力すると+441234567890、国内の電話番号検証が使用され、無効なパターンが表示されます。しかし、国をバハマに変更すると、国内の電話番号検証が使用されなくなり、無効なパターンメッセージが表示されなくなります。ただし、電話番号を変更するまで、無効なパターンメッセージが引き続き表示されます。電話番号を変更すると、メッセージが消えます。

これが発生する理由は、国の選択が変更されているときに、電話番号フィールドで ng-pattern 検証が再度実行されないためです。国が変更されるたびに ng-pattern 検証を強制的に再評価する方法はありますか?

問題を再現するには、以下のスニペットを参照してください。

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);
      }
    }
  })();

});
.error {
  color: red;
  font-style: italic;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="example" ng-controller="exampleCtrl">
  <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>

4

2 に答える 2

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})$/;

無限$digestエラーにつながります。

于 2016-02-23T04:42:56.630 に答える
0

この問題に対処する 1 つの方法を次に示します。

私が本質的に行ったことは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="";
  }

これにより、検証が再度実行されます。

ここにデモがあります。

この解決策がうまくいくかどうか教えてください。

于 2016-02-23T04:18:16.123 に答える