Ionic Angular maxlength not working in input

Question

When I install the APK in my android phone, the input allows me to insert more than 5 characters which I guess it shouldn't be doing since I set maxlength on html and ts.

here's my html:

<ion-row id="rowValidCvv"> 
  <ion-input placeholder="Validade" minlength="4" maxlength="5" type="text" class="input" id="inputValid" formControlName='expire_date'></ion-input>
  <ion-input placeholder="CVV" class="input" id="inputCvv" formControlName='card_cvv'></ion-input>
</ion-row>

my ts:

this.registerCardForm = this.formbuilder.group({
    card_holder_name:[null, [Validators.required, Validators.minLength(5)]],
    card_number:[null, [Validators.required, Validators.minLength(13)]],
    expire_date:[null, [Validators.required, Validators.minLength(4), Validators.maxLength(5)]],
    card_cvv:[null, [Validators.required, Validators.minLength(3)]],
    street_address:[null, [Validators.required, Validators.minLength(5)]],
    street_number:[null, [Validators.required, Validators.minLength(1)]],
    state:[null, [Validators.required, Validators.minLength(2)]],
    city:[null, [Validators.required, Validators.minLength(3)]],
    neighborhood:[null, [Validators.required, Validators.minLength(3)]],
    zipcode:[null, [Validators.required, Validators.minLength(8), Validators.maxLength(9)]],
    saveCard:[null, [Validators.required]],
  })

Here is the print of the apk on phone:

[ print of form inputs allowing more than 5 characters ]

What version of Ionic are you using? What version of Android are you using? Are you side loading the APK on the device or are you using an emulator? — Narm, Oct 05 '20 at 20:32
Ionic 6 and Android 10. I am side loading the apk on my device. — adriane harumi, Oct 06 '20 at 20:13

score 0 · Answer 1 · answered Oct 09 '20 at 15:48

0

Case is, you use input type="text". If you use type="number" then it validate to 5 characters. But you can't add "/" sign. So you need to add ionic datatime picker to get date and it is easy. Otherwise how you validate day in different months??

answered Oct 09 '20 at 15:48

Janitha Rasanga

1,010
1
11
20

Thank you for your answer, ion-datetime is excellent! I have the habit of not using number type because it keeps people from typing numbers that start with 0. For the input, a solution is using ion simple mask https://github.com/rafaelcorradini/ngx-ion-simple-mask – adriane harumi Oct 13 '20 at 02:23

Ionic Angular maxlength not working in input

1 Answers1