javascript - bootstrap - Mensajes ng angulares: cómo verificar la contraseña de confirmación?

javascript alert confirm

Question

LA SITUACIÓN:

Estoy usando la directiva ng-messages para la validación instantánea en mi aplicación angular. Todo funciona bien excepto una cosa: necesito validar el campo ''confirmación de contraseña'' y no sé cómo hacerlo.

EL CÓDIGO:

<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 PREGUNTA:

¿Cómo puedo verificar que la confirmación de la contraseña coincida con ng-messages?

Answer 1

Al desarrollar, puede enfrentar el hecho de que necesita crear sus propios cheques, lo que afectará la validez del formulario. Si estos controles son simples, como una comparación de los dos valores, es mejor utilizar una guía general, que escribir sus propios controles para cada situación. Mire la directiva use-form-error .

Ejemplo en vivo en jsfiddle .

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

  });

.errors {
  color: maroon
}

<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>

Answer 2

El enfoque más fácil es usar un patrón. ¡Funciona bien para mí!

<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>

Answer 3

El mejor enfoque es usar una directiva. El principal problema aquí es que se deben ver las entradas de confirmación de contraseña y contraseña.

Aquí está la solución que podría ayudar

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 ng-app="app">

<head>
  <script data-require="angular.js@~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>

Answer 4

Esto es lo que hice (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>

Y el siguiente filtro convierte la expresión regular ng-pattern en un literal:

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

Answer 5

Lo hice usando solo validaciones iónicas (html).

Nueva contraseña Se requiere una nueva contraseña

<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> 

Answer 6

ngMessage funciona agregando $ error. message_field_name al nombre de campo DOM en el objeto de formulario (dentro del alcance del curso). Entonces, si su nombre de formulario DOM es autentication_form y el nombre de campo DOM es password_confirmation , debe establecer $ scope.autentication_form.password_confirmation. $ Error. nomatch (o el nombre ngMessage que desee) en true para mostrar el error "No coincide".

Margen:

<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>

Código, nada especial, solo mirando ambas contraseñas:

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