Ionic framework 离子输入仅接受20位数字吗？

我试过使用

<ion-input formControlName="LPNumber" type="number">

LPNumber: ['', [Validators.required, Validators.minLength(20), Validators.maxLength(20)]]

LPNumber:[''[Validators.required，Validators.minLength（20），Validators.maxLength（20）]]

---

但这似乎不能证明。。。。至少是铬的。是否有更好的方法验证Ionic 4中的20位数字？

因此，根据设计，如果您的输入类型为“数字”，则maxLength将被忽略

有很多方法可以解决这个问题。我使用了这种方法（有点黑）：

最大长度4

---

我的方法是：

<ion-input type="number" (ionChange)="onNumberChange($event)"></ion-input>

...
onNumberChange($event) {
    // checks of number only. Doesn't allow + - . for in input
    $event.target.value = $event.target.value.replace(/[^0-9]/g, '').replace(/(\..*)\./g, '$1');
    // checks for maxlength doesn't allow greater than specified length
    $event.target.value = $event.target.value.length > 20 ? $event.target.value.substring(0, 20) : $event.target.value;
}

...
onNumberChange（$event）{
//仅检查数字。输入中不允许+-
$event.target.value=$event.target.value.replace（/[^0-9]/g'，）.replace（/（\..*）\./g'，$1'）；
//检查maxlength不允许大于指定长度
$event.target.value=$event.target.value.length>20？$event.target.value.substring（0,20）：$event.target.value；
}

您可以给出

type=“text”

然后允许，但您给出

type=“number”

然后不允许验证，因此您可以给出如下内容

page.html

<ion-item lines="none">
      <ion-label position="stacked">Input Number</ion-label>
      <ion-input formControlName="LPNumber" type="tel"></ion-input>
    </ion-item>

    <ion-item no-padding lines="none" class="validator-error"
      *ngIf="property_form_step3.controls.LPNumber.hasError('required') && property_form_step3.controls.LPNumber.touched">
      <p class="content">Please Enter Required Field!</p>
    </ion-item>
    <ion-item no-padding lines="none" class="validator-error"
      *ngIf="property_form_step3.controls.LPNumber.hasError('maxlength') && property_form_step3.controls.LPNumber.touched">
      <p class="content">Allow Only 20 Digits Number!</p>
    </ion-item>

page.scss

LPNumber: [null, Validators.compose([Validators.maxLength(20), Validators.required])],

.validator-error{
    --background: transparent;
    color: #d44848;
    --min-height: 30px;

    .content{
        margin-bottom: 0px;
        margin-top: 0px;
        font-size: 12px;
    }
}

---

尝试

如果我将输入类型切换为“tel”，我就能够使maxlength和minlength=20工作。但当它的数字，这些验证器不再正常工作

.validator-error{
    --background: transparent;
    color: #d44848;
    --min-height: 30px;

    .content{
        margin-bottom: 0px;
        margin-top: 0px;
        font-size: 12px;
    }
}