Разве ионный вход может принимать только 20 цифр?

Question

Я пытался использовать

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

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

, но это не похоже на проверку .... по крайней мере в chrome. Есть ли лучший способ проверить 20-значный номер в Ionic 4?

Answer 1

вы можете дать 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.ts

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

page.scss

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

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

Answer 2

<ion-input formControlName="LPNumber" minlength="20" maxlength="20" type="number">

Answer 3

Мой способ сделать это:

<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;
}

Answer 4

Таким образом, если у вас тип ввода «число», то maxLength будет игнорироваться.

Существует множество способов обойти это. Я использовал этот подход (немного хакерский):

<ion-item>
  <ion-label>MaxLength 4</ion-label>
  <ion-input onKeyPress="if(this.value.length==4) return false;"
    type="number"></ion-input>
</ion-item>