web-dev-qa-db-ja.com

Ionic 4イオン入力許可）数値のみ、アルファベットと特殊文字を制限する

私はIonic4でアプリを作成しています、私はユーザーが唯一の整数番号（0から9）を入力できる機能を持っているので、私はその他の文字、ドット、そしてすべてを制限したいと思います。
[。]私は以下の指令を使って制限しようとしました

 @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();
    }
}
 _

それはNGModelを正しく更新していますが、それでも無効な文字が入力フィールドに表示されます。

私は以下のように別のオプションを試しました

html

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

タイプスクリプト

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

無効な文字なしでHTMLでの印刷値を上回っても、入力に無効な文字を示しています。

5+入力が入力された場合、NGModelの値は5を示すが5+を示す入力フィールドを示す

5 ++を入力してから5入力しても、入力フィールドは今55を示します。

整数値のみを受け入れるために入力を制限する方法[0-9]

typescriptionic-frameworkangular7ionic4
8
Divyesh Savaliya

次の手順に従って入力された英字のパージを解決しました。

  1. メソッドを使用してutilクラスを作成します。
export class StringUtil {
 
    /**
     * Removes all non numeric characters from string.
     * @param str string
     */
    static removeNonNumerics = (str: string) => str.replace(/\D/g, '');

} _
  1. 私の指令を作成しました：
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. 私のページモジュールでInputIntegerDirectiveをインポートしました：
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. そして最後にページでそれを使った：
<ion-input type="text" inputmode="numeric" formControlName="deliveryTime" maxlength="3" placeholder="Tempo de Entrega" [required]="true" appInputInteger>
</ion-input> _

このディレクティブはWebブラウザと私のモバイルデバイスでうまく機能しました。

2
felipesntsassis

このようなコードを変更してください。私はそれが解決することを願っています

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

これがあなたの問題に対する非常に単純な解決策です。

ステップ1 :番号専用指令を作成し、それを指令フォルダに配置します。

Number only.tyts

import { Directive, ElementRef, HostListener, Input } from '@angular/core';
import { NgControl } from '@angular/forms';

@Directive({
  selector: 'input[numbersOnly]'
})
export class NumberDirective {

  constructor(private _el: ElementRef) { }

  @HostListener('input', ['$event']) onInputChange(evt) {

    if (evt.which === 8 || evt.which === 0) {
        return true;
    }

    const regex = new RegExp("^[0-9\~]*$");
    var key = String.fromCharCode(!evt.charCode ? evt.which : evt.charCode);
    // console.log(regex.test(key))
    if (!regex.test(key)) {
        evt.preventDefault();
        return false;
    }
    return true;
  }

}
 _

**ステップ2：** App.Moduleファイルにインポートします。

import { NumberDirective } from './directive/number-only.directive';
@NgModule({
  imports: [
    CommonModule,
  ],
  declarations: [NumberDirective],
  exports: []
})
export class AppModule { }
 _

ステップ3 :以下のような入力フィールドにディレクティブを適用してください。

  <input type="text" numbersOnly placeholder="Enter Mobile/Phone Number"> 
 _
0
TheParam