1

Cómo puedo validar para que el botón no me permita cambiar la contraseña hasta que no sean iguales?, algo con $error o ng-message.

Quiero que cuando le de cambiar contraseña valide que si hay algo en los input y que sean iguales, de lo contrario no haga nada.

var app = angular.module('myApp', []);

app.controller('appController', function ($scope, $http) {
    $scope.changePassword = function() {
        if ($scope.newPassword == $scope.confirmNewPassword) {
            console.log("contraseña son correctas");
        }else {
            console.log("contraseña no coinciden, vuelva a intentar");
        }
    }
});
<!DOCTYPE html>
<html>
  <head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script src="script.js"></script>

  </head>
  <body ng-app="myApp" ng-controller="appController">
    <div class="col-sm-12 col-md-12">
      <label>Nueva contrasena:</label>
      <input type="text" ng-model="newPassword" placeholder="Nueva contrasena" class="form-control" />
    </div>
    <div class="col-sm-12 col-md-12">
      <label>Repetir Contrasena:</label>
      <input type="text" ng-model="confirmNewPassword" placeholder="Repetir contrasena" class="form-control" />
    </div>
    <div class="col-sm-12 col-md-12">
      <button type="button" ng-click="changePassword()">Cambiar contrasena</button>
    </div>
  </body>
</html>

4
  • Tu ejemplo funciona correctamente. Que es lo que te falla?
    – Einer
    Commented el 23 sept. 2017 a las 21:43
  • @Einer algo como un ng-disable al botón cambiar contraseña, pero no lo quería hacer con el ng-disable :D, es decir que se debe ingresar algo a los input para poder que ejecute el botón cambiar contraseña.
    – zerokira
    Commented el 25 sept. 2017 a las 12:47
  • Osea, si no hay nada escrito en los inputs que el button este deshabilitado?
    – Einer
    Commented el 25 sept. 2017 a las 12:56
  • @Einer que el botón valide que debe haber algo escrito para poder ejecutar, no necesariamente que este desahabilitado por que ya lo hice con ng-disable, solo quería saber otras opciones de hacerlo.
    – zerokira
    Commented el 25 sept. 2017 a las 13:09

2 respuestas 2

1

Si lo que quieres es validar que tengan datos, entonces utiliza la propiedad .length que te da el total de caracteres de un string. Si ambos son igual a 0, entonces es muestras el error:

var app = angular.module('myApp', []);

app.controller('appController', function ($scope, $http) {


    $scope.confirmNewPassword = "";
    $scope.newPassword = "";

    $scope.changePassword = function() {
        if($scope.newPassword.length == 0 || $scope.confirmNewPassword.length == 0)
        {
           console.log("Los campos contraseñas son requeridos");
        }
        else if ($scope.newPassword == $scope.confirmNewPassword) {
            console.log("contraseña son correctas");
        }else {
            console.log("contraseña no coinciden, vuelva a intentar");
        }
    }
});
<!DOCTYPE html>
<html>
  <head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script src="script.js"></script>

  </head>
  <body ng-app="myApp" ng-controller="appController">
    <div class="col-sm-12 col-md-12">
      <label>Nueva contrasena:</label>
      <input type="text" ng-model="newPassword" placeholder="Nueva contrasena" class="form-control" />
    </div>
    <div class="col-sm-12 col-md-12">
      <label>Repetir Contrasena:</label>
      <input type="text" ng-model="confirmNewPassword" placeholder="Repetir contrasena" class="form-control" />
    </div>
    <div class="col-sm-12 col-md-12">
      <button type="button" ng-click="changePassword()">Cambiar contrasena</button>
    </div>
  </body>
</html>

1
  • gracias amigo algo asi buscaba :)
    – zerokira
    Commented el 25 sept. 2017 a las 13:54
0

Te recomiendo que leas esta guía para hacer exactamente lo que necesitas. Aquí utilizan una directiva para controlar los match de 2 inputs y lo utilizan con $error. Eso si, también te recomiendo que no la llames ngMatch como hacen ahí. Cámbiale el nombre ya que el prefijo ng podría causar conflicto con las directivas de angularjs

AngularJS Password Match form validation

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.