Как я могу создать директиву в AngularJS для проверки электронной почты или подтверждения пароля без манипуляций с DOM или jQuery?

17

Я хочу создать директиву подтверждения пароля/адреса электронной почты в AngularJS, но все те, что я видел до сих пор, полагаются на много DOM, которые выкапывают или тянут jQuery. Если я могу, я полагаюсь только на свойства $scope. Какой лучший способ сделать это?

Теги:
validation
angularjs-scope
angularjs-directive

2 ответа

25
Лучший ответ

Посмотрев на многочисленные полезные способы реализации этой директивы, я понял, как это сделать без манипуляций с DOM или с помощью jQuery. Здесь Plunk, который показывает, как.

Он включает в себя использование:

  • свойства ng-модели в поле $scope для обоих полей ввода
  • $parse (expr) (область) и простая область. $watch expression - оценивать свойство match в контексте текущей области действия по отношению к $modelValue элемента управления, на который вы добавляете директиву атрибута соответствия.
  • Отключение кнопки отправки, если свойство $invalid истинно в базовой форме.

Надеюсь, это полезно для некоторых. Здесь суть:

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

app.directive('match', function($parse) {
  return {
    require: 'ngModel',
    link: function(scope, elem, attrs, ctrl) {
      scope.$watch(function() {        
        return $parse(attrs.match)(scope) === ctrl.$modelValue;
      }, function(currentValue) {
        ctrl.$setValidity('mismatch', currentValue);
      });
    }
  };
});

app.controller('FormController', function ($scope) {
  $scope.fields = {
    email: '',
    emailConfirm: ''
  };

  $scope.submit = function() {
    alert("Submit!");
  };
});

Затем в HTML:

<!DOCTYPE html>
    <html ng-app="app">  
      <head lang="en">
        <meta charset="utf-8">
        <title>Custom Plunker</title>
        <link rel="stylesheet" href="style.css">
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
        <script src="app.js"></script>
      </head>  
      <body ng-controller="FormController">
        <form name='appForm' ng-submit='submit()'>
          <div class="control-group">
            <label class="control-label required" for="email">Email</label>
            <div class="controls">
              <input id="email" name="email" ng-model="fields.email" 
    class="input-xlarge" required="true" type="text" />
              <p class="help-block">[email protected]</p>
            </div>
          </div>
          <div class="control-group">
            <label class="control-label required" for="emailConfirm">Confirm Email</label>
            <div class="controls">
              <input name="emailConfirm" ng-model="fields.emailConfirm" 
    class="input-xlarge" required="true"
                type="text" match="fields.email" />
              <div ng-show="appForm.emailConfirm.$error.mismatch">
                <span class="msg-error">Email and Confirm Email must match.</span>
              </div>
            </div>
          </div>
          <button ng-disabled='appForm.$invalid'>Submit</button>
        </form>
      </body>
    </html>
Поделиться
  • 4
    Да, почему? Для чего еще нужна функция «ответь на свой вопрос / поделись знаниями». Sheesh.
  • 1
    Я не понимаю вашу точку зрения. Я должен был сформулировать это «Как я могу сделать такое» вместо «Как?» Когда вы задаете вопрос, он указывает, что, если вы можете ответить на него самостоятельно, делайте это, чтобы распространять знания.
Показать ещё 6 комментариев
1

Это хорошо работает для меня:

директива:

angular.module('myApp').directive('matchValidator', [function() {
        return {
            require: 'ngModel',
            link: function(scope, elm, attr, ctrl) {
                var pwdWidget = elm.inheritedData('$formController')[attr.matchValidator];

                ctrl.$parsers.push(function(value) {
                    if (value === pwdWidget.$viewValue) {
                        ctrl.$setValidity('match', true);                            
                        return value;
                    }                        

                    if (value && pwdWidget.$viewValue) {
                        ctrl.$setValidity('match', false);
                    }

                });

                pwdWidget.$parsers.push(function(value) {
                    if (value && ctrl.$viewValue) {
                        ctrl.$setValidity('match', value === ctrl.$viewValue);
                    }
                    return value;
                });
            }
        };
    }])

Использование

<input type="email" ng-model="value1" name="email" required>
<input type="email" ng-model="value2" name="emailConfirm" match-validator="email" required>

ошибка отображения

<div ng-if="[[yourFormName]].emailConfirm.$error">
    <div ng-if="[[yourFormName]].emailConfirm.$error.match">
        Email addresses don't match.
    </div>
</div>
Поделиться
  • 4
    Можете ли вы предоставить скрипку, чтобы другие разработчики могли посмотреть, как она работает? Спасибо

Ещё вопросы

Сообщество Overcoder
Наверх
Меню