【问题标题】:Ionic Angular maxlength not working in inputIonic Angular maxlength 在输入中不起作用
【发布时间】:2021-01-20 16:55:24
【问题描述】:

当我在我的 android 手机中安装 APK 时,输入允许我插入超过 5 个字符,我猜这不应该这样做,因为我在 html 和 ts 上设置了 maxlength。

这是我的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>

我的 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]],
  })

这是手机上的apk打印:

[]

【问题讨论】:

  • 您使用的是哪个版本的 Ionic?你用的是什么版本的安卓?您是在设备上侧加载 APK 还是使用模拟器?
  • Ionic 6 和 Android 10。我正在将 apk 加载到我的设备上。
  • 你能给我们看看控制台吗?

标签: angular ionic-framework input apk maxlength


【解决方案1】:

案例是,您使用输入类型=“文本”。如果您使用 type="number" 则验证为 5 个字符。但不能加“/”号。所以你需要添加离子数据时间选择器来获取日期,这很容易。否则你如何验证不同月份的日期??

【讨论】:

  • 感谢您的回答,ion-datetime 非常好!我有不使用数字类型的习惯,因为它可以防止人们输入以 0 开头的数字。对于输入,解决方案是使用 ion simple mask github.com/rafaelcorradini/ngx-ion-simple-mask
猜你喜欢
  • 2018-06-19
  • 2018-04-03
  • 1970-01-01
  • 1970-01-01
  • 2023-03-03
  • 2019-07-17
  • 2014-08-18
  • 2012-07-15
  • 1970-01-01
相关资源
最近更新 更多