1

Tengo un problema con mi función , estoy validando que no se puedan ingresar letras en el campo la función funciona pero a medias, cuando dejo de escribir me deja la ultima letra este es mi código.

introducir la descripción de la imagen aquí

Esta es mi función

 validarNumeros() {
    const patt = new RegExp('/^[ 0-9áéíóúüñ]*$/');
    const pattReplace = new RegExp('[^ 0-9áéíóúüñ]+');
    $('#NumeroUno').on('input', function (e) {
      if (!patt.test(this.value)) {
        this.value = this.value.replace(pattReplace, '');
      }
    });
  }

Este es mi html:

<div class="form-group" *ngIf="descripcionNumero">
    <label class="">Número</label>
    <span class="textBigRed">*</span>
    <input type="text" class="form-control" id="NumeroUno" formControlName="NumeroUno"
     (blur)="ConcatenarDireccion('num',contactoFrom.controls.NumeroUno.value)" 
     (input)="validarNumeros()" [attr.disabled]="formBuscarLocked" />

    </div>

Así concateno:

 ConcatenarDireccion(campo, formCampo) {
 if (campo === 'via') {
   this.Via = formCampo.Abreviatura;
  } else if (campo === 'num') {
   this.Numero = formCampo;
  } else if (campo === 'letra') {
   this.Letra = formCampo.Descripcion;
  } else if (campo === 'numDos') {
   this.NumeroDos = formCampo;
  } else if (campo === 'letraDos') {
   this.LetraDos = formCampo.Descripcion;
  } else if (campo === 'card') {
   this.Cardinal = formCampo.Descripcion;
  } else if (campo === 'numTres') {
   this.NumeroTres = formCampo;
  } else if (campo === 'inmu') {
   this.inmueble = formCampo.Descripcion;
  } else if (campo === 'numCuatro') {
   this.NumeroCuatro = formCampo;
  }
}

y así lo muestro:

<div class="col-xs-12 col-md-12 col-lg-12" [hidden]="ocultarDireccion">
    <div class="col-xs-12 col-md-12 col-lg-12" style="padding-bottom: 15px">
        <label class="textBlod"> Direccion seleccionada: &nbsp; </label>
           <span>
                {{Via}} {{Numero}} {{Letra}} {{NumeroDos}} {{LetraDos}} {{Cardinal}} {{NumeroTres}} {{inmueble}}
                 {{NumeroCuatro}}
             </span>
     </div>
</div>

Que estoy haciendo mal ? o hay otra forma de hacerlo ?

5
  • Deberias agregar la funcion ConcatenarDireccion
    – alanfcm
    Commented el 22 jul. 2019 a las 16:51
  • Cuando concatene validar que no se ingresen letras ? Commented el 22 jul. 2019 a las 16:55
  • No, que edites tu pregunta agregando la funcion para poder ver porque se concatena ese valor.
    – alanfcm
    Commented el 22 jul. 2019 a las 16:56
  • Listo @alanfcm, ya agregue la función y como lo muestro Commented el 22 jul. 2019 a las 17:04
  • Tiene alguna solución ???? Commented el 22 jul. 2019 a las 17:14

2 respuestas 2

1

Buenas lo que sucede es que alteras el valor del input mas no lo vuelves a actualizar en span.

validarNumeros() {
    const patt = new RegExp('/^[ 0-9áéíóúüñ]*$/');
    const pattReplace = new RegExp('[^ 0-9áéíóúüñ]+');
    $('#NumeroUno').on('input', function (e) {
      if (!patt.test(this.value)) {
        this.value = this.value.replace(pattReplace, '');
        ConcatenarDireccion('num',this.value);
      }
    });
  }

Aqui te agrego que vuelva a concatenar.

6
  • Voy a realizar el cambio y a probar y te aviso gracias! Commented el 22 jul. 2019 a las 17:38
  • Me aparece este error No se encuentra el nombre 'ConcatenarDireccion'. cuando agrego la función concatenar a esa función, si le pongo this. funciona pero al escribir me aparece el mismo error pero en consola ERROR TypeError: this.ConcatenarDireccion is not a function Commented el 22 jul. 2019 a las 17:40
  • Quite la funcion y deje que solo remplazara la variable else if (campo === 'num') { this.Numero = formCampo; } this.Numero pero sigue concatenando la ultima letra que presiono Commented el 22 jul. 2019 a las 17:45
  • La función está en el mismo documento?
    – oegpyg
    Commented el 22 jul. 2019 a las 18:30
  • si @oegpyg esta en el mismo documento Commented el 22 jul. 2019 a las 18:32
0

Bueno le di solucion de esta forma , tenia dos problemas uno deba cambiar el tipo de evento en el boton de (input) a (keypress) asi:

    <div class="form-group" *ngIf="descripcionNumero">
        <label class="">Número</label>
        <span class="textBigRed">*</span>
         <input type="text" class="form-control" id="NumeroUno" formControlName="NumeroUno"
         (blur)="ConcatenarDireccion('num',contactoFrom.controls.NumeroUno.value)" (keypress)="validarNumeros()" 
[attr.disabled]="formBuscarLocked" />

    </div>

Y en mi component modifique la función que convierte y la puse a retornar string modificando la variable directamente así :

funcionConvert(campo): string {
    const patt = new RegExp('/^[ 0-9áéíóúüñ]*$/');
    const pattReplace = new RegExp('[^ 0-9áéíóúüñ]+');
    if (!patt.test(campo)) {
      campo = campo.replace(pattReplace, '');
      return campo;
    }
  }

Método que concatena:

 ConcatenarDireccion(campo, formCampo) {
    if (campo === 'via') {
      this.Via = formCampo.Abreviatura;
    } else if (campo === 'num') { //
      this.Numero = this.funcionConvert(formCampo);
    } else if (campo === 'letra') {
      this.Letra = formCampo.Descripcion;
    } else if (campo === 'numDos') { //
      this.NumeroDos = this.funcionConvert(formCampo);
    } else if (campo === 'letraDos') {
      this.LetraDos = formCampo.Descripcion;
    } else if (campo === 'card') {
      this.Cardinal = formCampo.Descripcion;
    } else if (campo === 'numTres') { //
      this.NumeroTres = this.funcionConvert(formCampo);
    } else if (campo === 'inmu') {
      this.inmueble = formCampo.Descripcion;
    } else if (campo === 'numCuatro') {
      this.NumeroCuatro = this.funcionConvert(formCampo);
    }
  }

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.