2016-08-02 6 views
0

Ich habe eine Eingabe die E-Mail zweimal,Wie customed Richtlinie und normale ng-Richtlinie läuft auch

jedoch zu bestätigen, wenn ich verwenden, um die check-email Richtlinie und die required Validierung funktioniert nicht mehr.

Irgendwelche Vorschläge? Ich möchte nicht, Benutzer dieses Feld leer

html

<input type="text" 
     id="confirm_email_booking" 
     name="confirm_email_booking" 
     class="form-control" 
     check-email 
     ng-model="payment_contact.confirm_email_booking" 
    /> 

JS

app.directive('checkEmail', function() { 
    return { 
     require: 'ngModel', 
     link: function(scope, elm, attrs, ctrl) { 
      ctrl.$parsers.unshift(function(viewValue, $scope) { 
       var notMatch = (viewValue != scope.form.email_booking.$viewValue) 
       ctrl.$setValidity('notMatch', !notMatch) 

       return notMatch; 
      }) 
     } 
    } 
}) 
+0

Nun, ich sehe nicht 'required' hier .. – developer033

+0

Warum Sie nicht einfach die Prüffunktion in der' ctrl. $ Validators'? – MMhunter

Antwort

0

hält können Sie prüfen nur, wenn der Wert vorhanden in Ihrer Richtlinie ist, wie folgt:

var notMatch = viewValue && viewValue != scope.form.email_booking.$viewValue; 

Dann könnten Sie etwas wie dieses haben:

(function() { 
 
    "use strict"; 
 

 
    angular 
 
    .module('app', []) 
 
    .controller('MainCtrl', MainCtrl) 
 
    .directive('checkEmail', checkEmail); 
 

 
    MainCtrl.$inject = ['$scope']; 
 

 
    function MainCtrl($scope) { 
 

 
    } 
 

 
    function checkEmail() { 
 
    return { 
 
     require: 'ngModel', 
 
     link: function(scope, elm, attrs, ctrl) { 
 
     ctrl.$parsers.unshift(function(viewValue, $scope) { 
 
      var notMatch = viewValue && viewValue != scope.form.email_booking.$viewValue; 
 
      ctrl.$setValidity('notMatch', !notMatch); 
 

 
      return notMatch; 
 
     }) 
 
     } 
 
    } 
 
    } 
 
})();
<!DOCTYPE html> 
 
<html ng-app="app"> 
 

 
<head> 
 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css"> 
 
</head> 
 

 
<body ng-controller="MainCtrl"> 
 
    <div class="col-md-12"> 
 
    <form name="form"> 
 
    <input type="text" id="email_booking" name="email_booking" class="form-control" ng-model="payment_contact.email_booking" /> 
 
    <hr> 
 
    <input type="text" id="confirm_email_booking" name="confirm_email_booking" class="form-control" check-email ng-model="payment_contact.confirm_email_booking" required /> 
 
    <span class="text-danger" ng-if="form.confirm_email_booking.$error.required"> 
 
     Required! 
 
    </span> 
 
    <span class="text-danger" ng-if="form.confirm_email_booking.$error.notMatch"> 
 
     NotMatch! 
 
    </span> 
 
    <pre ng-bind="form.confirm_email_booking | json"></pre> 
 
    </form> 
 
    </div> 
 
</body> 
 

 
</html>

Verwandte Themen