0

Estoy tratando de validar que un input type email sea igual al otro pero no he podido lograrlo, es posible validarlo desde la vista?

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
       
    
});
<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

</head>
<body ng-app="myApp" ng-controller="myCtrl">
    <form action="" name="formEmails">
        <label>Email</label>
        <input type="email" required ng-model="email" name="email"/>
        
        <label>Confirmar Email</label>
        <input type="email" ng-required="emailConfirm" ng-model="emailConfirm" name="emailConfirm"/>

        <button type="button" ng-disabled="formEmails.$invalid">Validar</button>
    </form>
    

</body>
</html>

1 respuesta 1

0

Un enfoque para solucionar esto, es implementar una directiva sobre el campo de confirmar email que verifique que sea igual al anterior. Para esto, dicha directiva debe requerir de la directiva ngModel, la que usas para hacer un binding a la variable emailConfirm.

angular
    .module('myApp')
    .directive('valorIgual', valorIgual);

function valorIgual() {
    var directive = {
        link: link,
        restrict: 'A',
        require: 'ngModel' //requerir de ngModel para capturar el valor del campo
    };
    return directive;

    function link(scope, elem, attrs, ctrl) {
        //al aplicar la directiva, la misma agrega un validador al campo
        ctrl.$validators.valorIgual = function (modelValue, viewValue) {
            //si el campo no tiene valor entonces 
            //retorna verdadero (deberia estar controlado por el required)
            if (ctrl.$isEmpty(modelValue)) {
                return true;
            } else {
            //de lo contrario se evalua en el scope del elemento el valor del atributo 
            //que define a la directiva (el mismo contiene la expresion para calcular el valor 
            //al que el campo debe ser igual), si es igual al valor del campo entonces es valido
                return scope.$eval(attrs.valorIgual) == viewValue;
            }
        }
    }
}

La directiva se usa de la siguiente forma:

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"> 
 </script>

</head>
<body ng-app="myApp" ng-controller="myCtrl">
    <form action="" name="formEmails">
        <label>Email</label>
        <input type="email" required ng-model="email" name="email"/>

        <label>Confirmar Email</label>
        <input type="email" ng-required="emailConfirm" valor-igual="email" ng-model="emailConfirm" name="emailConfirm"/>

        <button type="button" ng-disabled="formEmails.$invalid">Validar</button>
    </form>


</body>
</html>

Para mas informacion, fijate la documentacion de angularjs: Custom 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.