1

Tengo un problema: No logro que funcione dentro del mismo campo mi directiva con validación de RegEX, y la directiva minlength.

Ambos funcionan apropiadamente excepto que el numero de caracteres definidos en el minlength no son validados en el RegEX.

Mi directiva con RegEX:

angular
.module('app')
.directive('restrict', restrict);

restrict.$inject = ['$parse'];

function restrict($parse) {
var inputTypes = {
    textNumber: '[^A-Za-z0-9 _-ñÑáéíóúÁÉÍÓÚ]',
    text: '[^A-Za-z ñÑáéíóúÁÉÍÓÚ]',
    number: '[^0-9]',
    email: '[^A-Za-z.@]',
    basicTextNumber: '[^A-Za-z0-9_-]'
};

var link = function($scope, $element, $attrs) {
    var exp = inputTypes[$attrs.restrict] || $attrs.restrict;
    $scope.$watch($attrs.ngModel, function(value) {
        if (!value) {
            return;
        }
        if (typeof value === 'number') { // eslint-disable-line
            value = String(value);
        }
        $parse($attrs.ngModel).assign($scope, value.replace(new RegExp(exp, 'g'), ''));
    });
};

return {
    restrict: 'A',
    require: 'ngModel',
    link: link
};

Fragmento de mis inputs:

<div class="row">
                <div class="input-field col s6">
                    <input class="validate" type="text" name="nombre" ng-model="vm.users.nombre" ng-minlength="2" restrict="text" maxlength=40 data-length=40 required autocomplete="off">
                    <label ng-class="active" for="nombre">Nombre</label>

                    <div role="alert" style="color:maroon" ng-show="!registro.nombre.$pristine">
                        <span class="error" ng-show="registro.nombre.$error.required">
                            Requerido</span>
                        <span class="error" ng-show="registro.nombre.$error.minlength">
                            Minimo 2 caracteres</span>
                    </div>

                </div>
            </div>

¿Cual puede ser el problema?

1 respuesta 1

0

La verdad desconocosco el problema con la directiva propia de minlength.

Pero logre solucionar el problema haciendo mi propia directiva:

De esta manera aseguro que el Regex corra antes que la verificación de tamaño mínimo y máximo. Espero y esta solución sea optima y logre salverle unas horas de investigación a cualquier novato como yo.

 'use strict';

 angular
 .module('app')
 .directive('valminimo', valminimo);

function valminimo() {

 function link($scope, $element, $attrs, $ctrl) {
     var minlength = parseInt($attrs.valminimo);

     $scope.$watch($attrs.ngModel, function(value) {
         if (!value) {
             return;
         }
         if (typeof value === 'number') {
             value = String(value);
         }

         var valid = value.length >= minlength;
         $ctrl.$setValidity('valminimo', valid);
     });
 };


 return {
     restrict: 'A',
     priority: 0,
     require: '?ngModel',
     link: link
 };
}

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.