0

Tengo un Select del Tipo de documento donde están las opciones Cédula | RUC; necesito que el maxlength varié según el tipo seleccionado. Cuando sea cédula maxlength=10 y para RUC maxlength=13

Intente lo siguiente pero no me funciona:

create.html

<ion-item >
  <ion-label>Tipo de documento</ion-label>
  <ion-select formControlName="codSecTrans" (ionChange)="setCustomerFinal($event)">
      <ion-option value="04">RUC</ion-option>
      <ion-option value="05">Cedula</ion-option>
  </ion-select>
</ion-item>

<ion-item> 
  <ion-label inline >RUC{{maxVal}}</ion-label>  <!-- coloque el maxVal acá y se modifica en el evento change -->
  <ion-input type="text" formControlName="ruc" maxlength="{{maxVal}}"></ion-input>
  <!-- pero en el ion-input se mantiene maxlength=13 -->
</ion-item>

create.js

export class ClientCreatePage {
  maxVal: any = 13;

  setCustomerFinal(event){
      switch (event) {
      case "04": //RUC
        this.maxVal = 13;
        break;

      case "05": //Cedula
        this.maxVal = 10;
        break;
      }
   }
}

3 respuestas 3

1

Modifica tu método de esta manera:

setCustomerFinal(event){
  switch (event.detail.value) {
  case "04": //RUC
    this.maxVal = 13;
    break;

  case "05": //Cedula
    this.maxVal = 10;
    break;
  }

}

El parámetro event trae varios campos que definen todo el evento, no solo el valor del mismo, por eso es necesario acceder al valor mediante event.detail.value

1
  • Gracias, esto ayuda a mejorar el código pero no soluciona el problema.. Commented el 1 jun. 2020 a las 16:51
0

En este caso creo que debes poner:

<ion-input type="text" formControlName="ruc" [maxlength]="maxVal"></ion-input>
1
  • Gracias pero tampoco funciona, el maxlength se mantiene de 13 caracteres. Commented el 29 may. 2020 a las 17:07
0

Prueba así:

  setCustomerFinal(){
      switch (this.maxVal) {
      case "04": //RUC
        this.maxVal = 13;
        break;

      case "05": //Cedula
        this.maxVal = 10;
        break;
      }
   }
<ion-item >
  <ion-label>Tipo de documento</ion-label>
  <ion-select [(ngModel)]="maxVal" (ionChange)="setCustomerFinal()">
    <ion-select-option value="04">RUC</ion-select-option>
    <ion-select-option value="05">Cedula</ion-select-option>
  </ion-select>
</ion-item>

La solución que te propone Marvin debería funcionar.

2
  • Lo que no funciona es esta parte <ion-input type="text" formControlName="ruc" maxlength="{{maxVal}}"></ion-input> no se modifica esta parte maxlength="{{maxVal}}" Commented el 5 jun. 2020 a las 19:48
  • No, eso está funcionando perfectamente, Cesar. La solución que te ha propuesto Marvín es la más correcta. switch (event.detail.value) en vez de switch (event), pruébalo y nos cuentas. Commented el 5 jun. 2020 a las 23:46

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.