web-dev-qa-db-fra.com

Ionic 4 ION-INPUT Autoriser le numéro uniquement, restreindre l'alphabet et le caractère spécial

Je crée une application à Ionic4, j'ai une fonctionnalité dans laquelle l'utilisateur peut entrer le seul numéro d'entier (0-9), donc je souhaite limiter tout autre caractère I.E Alphabets, DOT, plus tout.
[.____] J'ai essayé de restreindre l'utilisation de la directive suivante

 @HostListener('input', ['$event']) onInputChange(event) {
    this.inputElement = this._el.nativeElement.getElementsByTagName('input')[0];
    const initalValue = this.inputElement.value;
    this.inputElement.value = initalValue.replace(/[^0-9]*/g, '');
    if (initalValue !== this.inputElement.value) {
       event.stopPropagation();
    }
}

Il met à jour NGModel correctement mais toujours, un caractère non valide est visible dans le champ de saisie.

J'ai essayé une autre option comme suit

html

<ion-input type="text" placeholder="Enter number"
        [(ngModel)]="userCount" 
        name="userCount" 
        (ionInput)="countChange($event)">
 </ion-input>
 Usercount: {{userCount}}

Manuscrit

countChange(event) {
    event.target.value = event.target.value.replace(/[^0-9]*/g, '');
}

Avec au-dessus de sa valeur d'impression en HTML correct sans caractère invalide, mais sa montre un caractère non valide en entrée.

Si j'entre 5+ en entrée, la valeur dans NGModel montre 5 mais le champ de saisie montrant 5+

Lorsque je tape 5 ++, puis tapez à nouveau, le champ de saisie montre 55 maintenant.

Comment puis-je limiter l'entrée pour accepter uniquement les valeurs entières [0-9]

typescriptionic-frameworkangular7ionic4
8
Divyesh Savaliya

J'ai résolu mon problème pour purger l'entrée de caractères alphabétiques suivant ces étapes:

  1. Je crée une classe UTIL avec la méthode:
export class StringUtil {
 
    /**
     * Removes all non numeric characters from string.
     * @param str string
     */
    static removeNonNumerics = (str: string) => str.replace(/\D/g, '');

}
  1. Créé ma directive:
import { Directive, HostListener } from '@angular/core';

import { StringUtil } from 'src/app/shared/utils/string.util';

@Directive({
    selector: '[appInputInteger]'
})
export class InputIntegerDirective {

    constructor() { }

    @HostListener('input', ['$event'])
    onInput(event: any) {
        event.target.value = StringUtil.removeNonNumerics(event.target.value);
    }

}
  1. J'ai importé le InputIntegerDirective dans mon module de page:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { IonicModule } from '@ionic/angular';

import { DeliveryTimePageRoutingModule } from './delivery-time-routing.module';

import { DirectivesModule } from 'src/app/shared/directives/directives.module';
import { UiModule } from 'src/app/shared/ui/ui.module';
import { DeliveryTimePage } from './delivery-time.page';

@NgModule({
    imports: [
        CommonModule,
        DirectivesModule,
        FontAwesomeModule,
        FormsModule,
        IonicModule,
        DeliveryTimePageRoutingModule,
        ReactiveFormsModule,
        UiModule
    ],
    declarations: [DeliveryTimePage]
})
export class DeliveryTimePageModule { }
  1. Et finalement l'utiliser à la page:
<ion-input type="text" inputmode="numeric" formControlName="deliveryTime" maxlength="3" placeholder="Tempo de Entrega" [required]="true" appInputInteger>
</ion-input>

Cette directive a également fonctionné sur le navigateur Web et mon appareil mobile.

2
felipesntsassis

Changez votre code comme celui-ci. J'espère que ça va réparer

countChange(event) {
   
   this.userCount += event.target.value.replace(/[^0-9]*/g, '');
}
<ion-input type="text" placeholder="Enter number"
         name="userCount" 
        (change)="countChange($event)">
 </ion-input>
 Usercount: {{userCount}}
0
Velusamy Venkatraman