JSFiddle - React, Tailwind, and code Playground

by FCortesF

HTML

<fieldset ng-app="myapp" ng-controller="cambioContraController" class="divCambioContra " style="width:400px" >
    <form name="myForm">
            <label>&nbsp; Usuario:</label>
            <input type="text" class="form-control" id="usuario" ng-model="usuario" ng-readonly="true" style="background-color:#CFC9C9;" />
            
        <label for="password">Password</label>
            <input type="password" id="password" name="password" ng-model="formData.password" ng-minlength="8" ng-maxlength="20" 
                   ng-pattern="/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{8,20}/" required class="form-control" />
            
            <span ng-show="myForm.password.$error.required && myForm.password.$dirty"  >Obligatorio</span>
            <span ng-show="!myForm.password.$error.required && (myForm.password.$error.minlength || myForm.password.$error.maxlength) && myForm.password.$dirty" >La contraseña debe contener entre 8 y 20 caracteres.</span>
            <span ng-show="!myForm.password.$error.required && !myForm.password.$error.minlength && !myForm.password.$error.maxlength && myForm.password.$error.pattern && myForm.password.$dirty" >
            Debe contener al menos una mayúscula, minúscula, número y signo.</span>
        <br />
            <label for="password_c">Confirm Password</label>
            <input type="text" id="password_c" name="password_c" ng-model="formData.password_c" valid-password-c required class="form-control" />
            <span ng-show="myForm.password_c.$error.required && myForm.password_c.$dirty">Por favor, confirma la contraseña.</span>
            <span ng-show="!myForm.password_c.$error.required && myForm.password_c.$error.noMatch && myForm.password.$dirty">Las contraseñas no coinciden.</span>
        <br />
        <div class="centrado">
            <button type="submit" class="btn" ng-disabled="!myForm.$valid" ng-click="BotActualizar()">Cambiar</button>
        </div>

        Summary
        <ul>
...

JavaScript

angular.module('myapp', []).directive('validPasswordC', function ()
{
    return {
        require: 'ngModel',
        link: function (scope, elm, attrs, ctrl)
        {
            ctrl.$parsers.unshift(function (viewValue, $scope)
            {
                var noMatch = viewValue != scope.myForm.password.$viewValue
                ctrl.$setValidity('noMatch', !noMatch);
                return true;
            });

        }
    }
}).controller('cambioContraController', ['$scope',
    function ($scope)
    {
    $scope.cambioContra = {};
    $scope.cambioContra.usuario = "FCortesF";
    $scope.cambioContra.mensaje = "";
    $scope.cambioContra.formuValidado = false;

    $scope.usuario = "FCortesF";//es el text del formulario   


    $scope.BotActualizar = function ()
    {
			alert("Ok");
    }

    $scope.comprobarContras = function ()
    {
        if ($scope.password !== "" && $scope.password_c !== "" && $scope.password !== undefined && $scope.password_c !== undefined)
        {
            if ($scope.password === $scope.password_c)
            {
                $scope.cambioContra.formuValidado = true;
                $scope.cambioContra.mensaje = '';
            }
            else {
                $scope.cambioContra.formuValidado = false;
                $scope.cambioContra.mensaje = 'No coinciden las contraseñas.';
            }
        }
        else
            $scope.cambioContra.mensaje = 'Hay que rellenar los campos obligatorios.';


    }

}]);