1

独自のディレクティブを使用してフォームのデータを検証しようとしていますが、ユーザーがバインディングの直後に何かを入力した後にのみデータが検証されます。

myApp.directive('dvCyrillic', function() {
  return {
    require: 'ngModel',
    link: function(scope, elm, attrs, ctrl) {
      ctrl.$parsers.unshift(function(viewValue) {
        var CYRILLIC_REGEX = /^[а-яё -]+$/i;
        if (CYRILLIC_REGEX.test(viewValue) || viewValue.length == 0) {
          // it is valid
          ctrl.$setValidity('cyrillic', true);
          return viewValue;
        } else {
          // it is invalid, return undefined (no model update)
          ctrl.$setValidity('cyrillic', false);
          return undefined;
        }
      });
    }
  };
});

ここに例があります。ユーザーが入力する前にデータを検証するにはどうすればよいですか?

4

1 に答える 1

1

は$parsersビューからモデルに対してのみ検証し、 はモデルからビューに対して$formatters検証します。別の方法で検証をリファクタリングし、パーサーとフォーマッターの両方に検証を追加できます。

var CYRILLIC_REGEX = /^[а-яё -]+$/i;
ctrl.$parsers.unshift(validate);
ctrl.$formatters.unshift(validate);

function validate(viewValue) {
  if (CYRILLIC_REGEX.test(viewValue) || viewValue.length == 0) {
    // it is valid
    ctrl.$setValidity('cyrillic', true);
    return viewValue;
  } else {
    // it is invalid, return undefined (no model update)
    ctrl.$setValidity('cyrillic', false);
    return undefined;
  }
}

これが更新されたフィドルです

于 2013-08-16T13:29:26.550 に答える