6

AngularJS のメールバリデーターをオーバーライドしたい。メールアドレスを検証するために、カスタム文字列を使用したい。ドキュメントで見つけたコードは次のようなものです: JS:

   var app = angular.module('registrationApp', []);

    app.directive('overwriteEmail', function() {
      var EMAIL_REGEXP = /^[a-z0-9!#$%&'*+/=?^_`{|}~.-]+@example\.com$/i;

      return {
        require: 'ngModel',
        restrict: '',
        link: function(scope, elm, attrs, ctrl) {
            if (ctrl && ctrl.$validators.email) {

                // this will overwrite the default Angular email validator
                ctrl.$validators.email = function(modelValue) {
                    return ctrl.$isEmpty(modelValue) || EMAIL_REGEXP.test(modelValue);
                }
            }
        }
    }
});

HTML:

<div data-ng-app="registrationApp" data-ng-init="">
  <form name="form" class="css-form" novalidate>
  <div>
      Overwritten Email:
      <input type="email" ng-model="myEmail" overwrite-email name="overwrittenEmail" />
      <span ng-show="form.overwrittenEmail.$error.email">This email format is invalid!     </span><br>
      Model: {{myEmail}}
    </div>
  </form>
</div>

しかし、コードは機能しません。スローされるエラーは次のとおりです。

TypeError: N ( http://ajax.googleapis.com/ajax/libs/ ) のリンク ( http://localhost:63342/goga_tests/js/registration.js:39:32 ) で未定義のプロパティ 'email' を読み取ることができませんangularjs/1.2.26/angular.min.js:54:372 ) g ( http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:47:256 ) でg ( http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:47:273 ) N ( http://ajax.googleapis.com/ajax/libs/angularjs ) /1.2.26/angular.min.js:54:313 ) g ( http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:47:256 ) at N ( http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:54:313) g ( http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:47:256 ) でhttp://ajax.googleapis.com/ajax/libs/angularjs /1.2.26/angular.min.js:46:377 でhttp://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:18:314

助けてくれてありがとう！

4

1 に答える 1

12

使用している角度バージョンは、ngModel コントローラー インスタンスに特別なプロパティを1.2.26追加しません。$validatorsangular の 1.3.x バージョンが必要です。

1.3.x があれば、ディレクティブをそのまま使用できます。また、優先順位2を ng-model (1) より大きくするように追加して、ディレクティブng-modelが次のターンに入る前にバリデーターを設定できるようにします。

app.directive('overwriteEmail', function() {
  var EMAIL_REGEXP = /^[a-z0-9!#$%&'*+/=?^_`{|}~.-]+@example\.com$/i;

  return {
    require: 'ngModel',
    restrict: '',
    priority: 2,
    link: function(scope, elm, attrs, ctrl) {
      if (ctrl && ctrl.$validators.email) {
        // this will overwrite the default Angular email validator
        ctrl.$validators.email = function(modelValue) {
          return ctrl.$isEmpty(modelValue) || EMAIL_REGEXP.test(modelValue);
        }
      }
    }
  }
});

デモ

var app = angular.module('app', []);

app.directive('overwriteEmail', function() {
  var EMAIL_REGEXP = /^[a-z0-9!#$%&'*+/=?^_`{|}~.-]+@example\.com$/i;

  return {
    require: 'ngModel',
    restrict: '',
    priority: 1,
    link: function(scope, elm, attrs, ctrl) {
      if (ctrl && ctrl.$validators.email) {
        // this will overwrite the default Angular email validator
        ctrl.$validators.email = function(modelValue) {
          return ctrl.$isEmpty(modelValue) || EMAIL_REGEXP.test(modelValue);
        }
      }
    }
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
<div ng-app="app">
  <div>
    <form name="form" class="css-form" novalidate>
      <div>
        Overwritten Email:
        <input type="email" ng-model="myEmail" overwrite-email name="overwrittenEmail" />
        <span ng-show="form.overwrittenEmail.$error.email">This email format is invalid!     </span>
        <br>Model: {{myEmail}}
      </div>
    </form>
  </div>
</div>

無効なパターンの場合はメッセージを表示するためにng-pattern使用して使用することもできます。form.overwrittenEmail.$error.pattern

<input type="email" ng-pattern="/^[a-z0-9!#$%&'*+/=?^_`{|}~.-]+@example\.com$/i" 
                    ng-model="myEmail" name="overwrittenEmail" />
   <span ng-show="form.overwrittenEmail.$error.pattern">

デモ

var app = angular.module('app', []);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div>
    <form name="form" class="css-form" novalidate>
      <div>
        Overwritten Email:
        <input type="email" ng-model="myEmail" ng-pattern="/^[a-z0-9!#$%&'*+/=?^_`{|}~.-]+@example\.com$/i" name="overwrittenEmail" />
        <span ng-show="form.overwrittenEmail.$error.pattern">This email format is invalid!     </span>
        <br>Model: {{myEmail}}
      </div>
    </form>
  </div>
</div>

于 2015-01-14T21:22:56.990 に答える