2015-07-07 3 views
0

В нижеприведенной форме я проверяю, что требуется адрес электронной почты:Добавить пользовательскую проверку в AngularJS форме

http://jsfiddle.net/U3pVM/16994/

Я хочу продлить проверку таким образом, чтобы это проверить, что первые два символа начинают с «DD». Кажется, мне нужно добавить настраиваемую директиву, но я не уверен, как связать поля электронной почты с директивой?

код скрипку:

<form ng-app="myApp" ng-controller="validateCtrl" 
name="myForm" novalidate> 

<p>Email:<br> 
<input type="email" name="email" ng-model="email" required> 
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid"> 
<span ng-show="myForm.email.$error.required">Email is required.</span> 
</span> 
</p> 

<p> 
<input type="submit" 
ng-disabled="myForm.user.$dirty && myForm.user.$invalid || 
myForm.email.$dirty && myForm.email.$invalid"> 
</p> 

</form> 

var app = angular.module('myApp', []); 
app.controller('validateCtrl', function($scope) { 

}); 

app.directive("myValidator", function(){ 
      // requires an isloated model 
      return { 
      // restrict to an attribute type. 
      restrict: 'A', 
      // element must have ng-model attribute. 
      require: 'ngModel', 
      link: function(scope, ele, attrs, ctrl){ 

       // add a parser that will process each time the value is 
       // parsed into the model when the user updates it. 
       ctrl.$parsers.unshift(function(value) { 
       if(value){ 
        // test and set the validity after update. 
        var valid = value.charAt(0) == 'D' && value.charAt(1) == 'D'; 
        ctrl.$setValidity('invalidAiportCode', valid); 
       } 

       return valid ? value : undefined; 
       }); 

      } 
      } 
     }); 
+0

Кажется, что вы делали большую часть этого слова правильно (по крайней мере, я не обнаружил никаких очевидных ошибок), но вы не применили директиву к вашему вводу, например. '" (если это относится к полю электронной почты). И если вы используете более поздние версии Angular, вы можете просто использовать 'ctrl. $ Validators.invalidAirportCode = function() {}' и возвращать 'true' /' false' вместо '$ parser' –

ответ

0

Вот как я хотел бы сделать это, используя пример аутентификации:

Простая разметка:

<input type="email" ng-model="existingUser.email"> 
<button ng-click="login(existingUser)">Login</button> 

Контроллер:

auth.controller('AuthCtrl', '$scope', 'validation', function($scope, validation) { 

    $scope.existingUser = { 
    email: '', 
    password: '' 
    } 

    $scope.login = function() { 

    validation.validateSignin($scope.existingUser) 
     .catch(function(err) { 

     // The validation didn't go through, 
     // display the error to the user 
     $scope.status.message = err; 
     }) 
     .then(function(res) { 

     // Validation passed 
     if (res === true) { 

      // Do something 
     } 
    }); 
    } 
} 

Факт ory:

auth.factory('validation', ['$q', function($q) { 
    return { 
    validateSignin: function(existingUser) { 

     var q = $q.defer(); 

     if (existingUser.email.substring(0,2) !== 'DD') { 
     q.reject('The email must start with "DD"'); 
     } 

     q.resolve(true); 

     return q.promise; 
    } 
    } 
}]); 

Позвольте мне объяснить, что происходит, сначала я создаю фабрику, которая проведет проверку. Затем я создаю обещание с методом разрешения и отклонения, метод отклонения будет вызываться, если проверка прошла неудачно, и если это сработает, тогда будет вызвано решение. Затем в вашем контроллере вы можете делать что-то на основе результата.

Сообщите мне, если что-то неясно.

Смежные вопросы