Custom validation σε input με AngularJS

[andreas_g]

Έχω κάποια input μέσα σε μια φόρμα και έχω βάλει validation με angularjs. Στο input του password όμως, πέρα από τον έλεγχο να μην είναι κενό, θέλω να βάλω και ένα έλεγχο για το τι password μπορεί να περάσεί αλλά δεν έχω βρει πως να το κάνω...

 

Η φόρμα μου ξεκινάει έτσι

<form class="form-group" name="newUser" ng-submit="toggleSave()" role="form" novalidate>
...
...

το password

<div ng-class="{ 'has-error' : newUser.userPassword.$invalid && !newUser.userPassword.$pristine }">
    <label for="userPassword">Password * <i class="fa fa-info-circle" uib-popover="Please type a password." popover-trigger="mouseenter"></i></label><br />
    <input type="password" ng-model="userPassword" name="userPassword" id="userPassword" class="form-control" required>
    <p ng-show="newUser.userPassword.$invalid && !newUser.userPassword.$pristine" class="help-block">Please enter a password.</p>
</div>

Στον controller της έχω βάλει αυτή τη μέθοδο για να κάνει τον έλεγχο

var pattern = new RegExp("(?=.*[0-9]+)(?=.*[A-Za-z]+)(?=.*[*:%!~]+).{8,20}");

$scope.validatePassword = function (password) {
    $scope.passwordIsValid = pattern.test(password);
}

Τώρα εδώ είναι το θέμα. Δεν μπορώ να καταλάβω πως θα καλέσω τη μέθοδο από το password για να εμφανίσω ένα ακόμα μήνυμα που θα λέει τι κωδικός θα μπορεί να μπει.

 

 

Ευχαριστώ 

[CtrlFreak]

Τα ng-show/hide είναι boolean τιμές. Θα μπορούσες να έχεις παράμετρο για το λάθος που θα κάνεις true. Επίσης για τον έλεγχο της εισόδου γιατί δεν το κάνεις με filter?

[t(o.ot)]

Με Site: ngPattern γίνεται αυτό:  https://jsfiddle.net/cv619dzm/

[andreas_g]

Τώρα είδα τις απαντήσεις σας, Τελικά χθες το απόγευμα το έκανα με δικό μου directive.

(function() {
    'use strict';

    APP.directive('fgRegexValidate', [fgRegexValidate]);

    function fgRegexValidate() {
        var directive = {
            restrict: 'A',
            require: "ngModel",
            link: function(scope, element, attributes, ctrl) {
                var pattern = new RegExp("(?=.*[0-9]+)(?=.*[A-Za-z]+)(?=.*[*:%!~]+).{8,20}");
                ctrl.$parsers.unshift(function (value) {
                    var valid = pattern.test(value);
                    ctrl.$setValidity('fgRegexValidate', valid);

                    return valid ? value : undefined;
                });

                ctrl.$formatters.unshift(function (value) {
                    ctrl.$setValidity('fgRegexValidate', pattern.test(value));

                    return value;
                });
            }
        }
        return directive;
    };
})();

και το καλώ έτσι...

<input type="password" ng-model="userPassword" name="userPassword" id="userPassword" class="form-control" fg-regex-validate required>
<p ng-show="newUser.userPassword.$error.fgRegexValidate && !newUser.userPassword.$pristine" class="help-block">Message...</p>

Δεν ξέρω άμα είναι η καλύτερη λύση αλλά προς το παρόν φαίνεται να δουλεύει...

 

@CtrlFreak Χθες, και εγώ προσπάθησα να δουλέψω με ng-show που θα καλεί μια συνάρτηση που θα έχει μέσα τον έλεγχο του pattern αλλά δεν μου δούλευε καθόλου για κάποιο λόγο και δεν μπόρεσα να βγάλω άκρη.

 

@t(o.o)t Καλή φάση φαίνεται το ng-pattern, δεν ήξερα καν ότι υπάρχει 

 

Ευχαριστώ για τις απαντήσεις πάντως.