Angolare ng-messaggi: come controllare la password di conferma?

LA SITUAZIONE:

Sto usando ng-messaggi direttiva per la convalida immediata nel mio angolare app. Tutto funziona bene, tranne una cosa: ho bisogno di validare il campo “conferma password” e non so come fare.

CODICE:

<form name="autentication_form" novalidate="" ng-submit="submit_register()">

    <label class="item item-input">
        <span class="input-label">Email</span>
        <input type="text" name="email" ng-model="registerData.email" required>

        <div class="form-errors" ng-messages="autentication_form.email.$error" role="alert" ng-if='autentication_form.email.$dirty'>
            <div class="form-error" ng-message="required">You did not enter the email</div>
        </div>
    </label>

    <label class="item item-input">
        <span class="input-label">Password</span>
        <input type="password" name="password" ng-model="registerData.password" required>

        <div class="form-errors" ng-messages="autentication_form.password.$error" role="alert" ng-if='autentication_form.password.$dirty'>
            <div class="form-error" ng-message="required">Please enter the password</div>
        </div>
    </label>

    <label class="item item-input">
        <span class="input-label">Password confirmation</span>
        <input type="password" name="password_confirmation" ng-model="registerData.password_confirmation" required>

        <div class="form-errors" ng-messages="autentication_form.password_confirmation.$error" role="alert" ng-if='autentication_form.password_confirmation.$dirty'>
            <div class="form-error" ng-message="required">Password confirmation required</div>
        </div>
    </label>

</form>

LA DOMANDA:

Come posso verificare che la password di conferma corrispondenza con ng-messaggi?



6 Replies
  1. 22

    L’approccio più semplice è quello di utilizzare un modello. Funziona bene per me!

    <input type="password" name="new_password1" ng-model="new_password1">
    
    <input type="password" name="new_password2" ng-pattern="\b{{new_password1}}\b" ng-model="new_password2">
    <div ng-messages="passwordForm.new_password2.$error">
        <div ng-message="pattern">Not equal!!!</div>
    </div>
    • Questo appare come la soluzione migliore e più facile. Mi piacerebbe cambiare il modello un po ‘ per la corrispondenza con l’intera linea, però: ng-pattern="^{{new_password1}}$"
    • Questo è impressionante. Come posso evitare di Analizzare il Lexer errore però? Ho “Imprevisto carattere successivo”
    • per risolvere il Parse Lexer errore, il modello dovrebbe essere avvolto con /: ng-pattern="/^{{new_password1}}$/"
    • Basta leggere le API di riferimento dal angolare pagina link Se l’espressione restituisce una stringa, quindi sarà convertito in una RegExp dopo il confezionamento in ^ e $ caratteri. Per esempio, “abc” sarà convertito a new RegExp(‘^abc$’). il che significa Che è possibile utilizzare ng-pattern=”{{new_password1}}
    • Cosa succede quando la password contiene caratteri che hanno un significato regexp (come * e +)?
    • hai ragione, ho appena provato e se la password contiene regexp poi il ng-modello avrà esito negativo e non corrispondono. Così non sembra, utilizzando ng-pattern è una soluzione praticabile.
    • NON UTILIZZARE QUESTO, la risposta è in difetto se la password contiene espressione regolare caratteri validi come /, $, etc.
    • Ottima soluzione, @ebastuart!

  2. 9

    L’approccio migliore è quello di utilizzare una direttiva. Il punto principale del problema qui è che entrambe le password e conferma password ingressi bisogno di essere guardato.

    Ecco la soluzione che potrebbe aiutare

    JS:

    angular.module('app', ['ngMessages'])
    
    .controller('ctrl', function($scope) {
      $scope.registerData = {};
    })
    
    
    .directive('confirmPwd', function($interpolate, $parse) {
      return {
        require: 'ngModel',
        link: function(scope, elem, attr, ngModelCtrl) {
    
          var pwdToMatch = $parse(attr.confirmPwd);
          var pwdFn = $interpolate(attr.confirmPwd)(scope);
    
          scope.$watch(pwdFn, function(newVal) {
              ngModelCtrl.$setValidity('password', ngModelCtrl.$viewValue == newVal);
          })
    
          ngModelCtrl.$validators.password = function(modelValue, viewValue) {
            var value = modelValue || viewValue;
            return value == pwdToMatch(scope);
          };
    
        }
      }
    });

    HTML:

    <html ng-app="app">
    
    <head>
      <script data-require="[email protected]~1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
      <script data-require="[email protected]" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular-messages.js"></script>
      <script src="https://code.angularjs.org/1.3.15/angular.js"></script>
      <script src="script.js"></script>
    </head>
    
    <body ng-controller="ctrl">
      <form name="autentication_form" novalidate="" ng-submit="submit_register()">
        <label class="item item-input">
          <span class="input-label">Email</span>
          <input type="text" name="email" ng-model="registerData.email" required="" />
          <div class="form-errors" ng-messages="autentication_form.email.$error" ng-if='autentication_form.email.$touched'>
            <span class="form-error" ng-message="required">You did not enter the email</span>
          </div>
        </label>
        <label class="item item-input">
          <span class="input-label">Password</span>
          <input type="password" name="password" ng-model="registerData.password" required />
          <div class="form-errors" ng-messages="autentication_form.password.$error" ng-if='autentication_form.password.$touched'>
            <span class="form-error" ng-message="required">Please enter the password</span>
          </div>
        </label>
        <label class="item item-input">
          <span class="input-label">Password confirmation</span>
          <input type="password" name="password_confirmation" ng-model="registerData.password_confirmation" required="" confirm-pwd="registerData.password" />
          <div class="form-errors" ng-messages="autentication_form.password_confirmation.$error" ng-if='autentication_form.password_confirmation.$touched'>
            <span class="form-error" ng-message="required">Password confirmation required</span>
            <span class="form-error" ng-message="password">Password different</span>
          </div>
        </label>
      </form>
    </body>
    
    </html>

    • oops. appena notato David soluzione.
    • Perché non chiamare $validate() invece di $setValidity? La logica è già presente.
  3. 4

    Quando in via di sviluppo, si può affrontare il fatto che è necessario creare le vostre verifiche, che influenzerà la validità del modulo. Se questi controlli sono semplici, come ad esempio un confronto tra i due valori, è meglio utilizzare una linea guida generale, di scrivere le vostre verifiche per ogni situazione. Guarda uso-forma-di errore direttiva.

    Esempio vivo in jsfiddle.

    JS:

    angular.module('ExampleApp', ['use', 'ngMessages'])
      .controller('ExampleController', function($scope) {
    
      });

    CSS:

    .errors {
      color: maroon
    }

    HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-messages.min.js"></script>
    <script src="https://cdn.rawgit.com/Stepan-Kasyanenko/use-form-error/master/src/use-form-error.js"></script>
    
    <div ng-app="ExampleApp">
      <div ng-controller="ExampleController">
    
        <form name="ExampleForm">
          <label>Password</label>
          <input ng-model="password" required />
          <br>
          <label>Confirm password</label>
          <input ng-model="confirmPassword" name="confirmPassword" use-form-error="isNotSame" use-error-expression="password && confirmPassword && password!=confirmPassword" required />
          <div ng-show="ExampleForm.$error.isNotSame" class="errors">Passwords Do Not Match!</div>
          <div ng-messages="ExampleForm.confirmPassword.$error" class="errors">
            <div ng-message="isNotSame">
              Passwords Do Not Match (from ng-message)!
            </div>
          </div>
        </form>
    
      </div>
    </div>

  4. 1

    Ecco quello che ho fatto (usando ng-pattern):

    <md-input-container class="md-block">
      <label>New Password</label>
      <input ng-model="user.password" name="password" type="password" required ng-pattern="'.{8,}'" />
      <div ng-messages="form.password.$error">
        <div ng-message="required">Password required.</div>
        <div ng-message="pattern">Password must be at least 8 characters.</div>
      </div>
    </md-input-container>
    <md-input-container class="md-block">
      <label>Confirm Password</label>
      <input ng-model="user.confirmPassword" name="confirmPassword" type="password" ng-pattern="user.password|escapeRegex" required />
      <div ng-messages="form.confirmPassword.$error">
        <div ng-message="required">Password confirmation required.</div>
        <div ng-message="pattern">Passwords do not match.</div>
      </div>
    </md-input-container>

    E il seguente filtro converte il ng-pattern regex per un valore letterale:

    module.filter('escapeRegex', function(){
      return function(str){
        return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
      }
    });
  5. 1

    ngMessage funziona aggiungendo $errore.message_field_name il DOM campo nome nella forma di oggetto (nell’ambito del corso). Quindi, se il vostro DOM nome del modulo è autentication_form e DOM nome del campo è password_confirmation, è necessario impostare $scope.autentication_form.password_confirmation.$errore.nomatch (o qualunque sia il ngMessage nome che si desidera) su true per visualizzare il “non coincide con” errore.

    Markup:

    <input type="password" name="password_confirmation" ng-model="registerData.password_confirmation" required />
    
    <div ng-messages="autentication_form.password_confirmation.$error">
                    <div ng-message="required">Please repeat your password.</div>
                    <div ng-message="nomatch">Doesn't match.</div>
                </div>
    </div>

    Codice, niente di speciale, solo guardando entrambe le password:

    $scope.$watch("registerData.password + registerData.password_confirmation", function () {
                $scope.autentication_form.password_confirmation.$error.nomatch = $scope.registerData.password !== $scope.registerData.password_confirmation;
            });
  6. -2

    ho fatto usando solo ionico(html) convalide.

    Nuova Password

    Nuova Password è necessario

    <label class="item item-input inputRadius">
    <span class="input-label">Confirm Password</span>
    <input type="password" placeholder="Confirm Password" ng-model="passwordUpdateInfo.confirmPassword" name="confirmPassword" required>
    </label>
    <div ng-show="passwordUpdateForm.$submitted || passwordUpdateForm.confirmPassword.$touched">
    <div ng-show="passwordUpdateForm.confirmPassword.$error.required" class="errorMessage">Confirm Password is required</div>
    </div>
    <div ng-show="passwordUpdateInfo.confirmPassword.length > 0 && passwordUpdateInfo.confirmPassword != passwordUpdateInfo.newPassword">
        Password not match..(amar from india)
    </div>
    <button class="button button-positive button-block" ng-disabled="passwordUpdateInfo.confirmPassword.length > 0 && passwordUpdateInfo.confirmPassword != passwordUpdateInfo.newPassword">Update</button> 

Lascia un commento