首页 > 解决方案 > Ionic Angular maxlength 在输入中不起作用

问题描述

当我在我的 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打印:

[ 打印表单输入允许超过 5 个字符]

标签: angularionic-frameworkinputapkmaxlength

解决方案


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


推荐阅读