web-dev-qa-db-fra.com

Comment restreindre les caractères spéciaux dans le champ de saisie en utilisant angular2 / typescript

Je suis nouveau sur Angular2. Maintenant, je dois restreindre les caractères spéciaux dans le champ de saisie, si je donne des chiffres et des alphabets, cela doit prendre et les caractères spéciaux doivent être bloqués. Quelqu'un peut-il aider s'il vous plaît.

Je partage du code ici:

In HTML:
<md-input-container>
<input type="text" (ngModelChange)="omit_special_char($event)" mdInput name="name" [(ngModel)]="company.name" placeholder="Company Name" #name="ngModel" minlength="3" required>
</md-input-container>

En TS: public e: tout;

omit_special_char(val)
{
   var k;
    document.all ? k = this.e.keyCode : k = this.e.which;
    return ((k > 64 && k < 91) || (k > 96 && k < 123) || k == 8 || k == 32 || (k >= 48 && k <= 57));
}
javascripthtmlangulartypescriptangular2-directives
7
Bhrungarajni

Tu faisais tout bien. Il suffit de modifier un peu la fonction. Vous utilisiez ngModelChange pour lier un événement qui n'est pas là. Vous pouvez utiliser le gestionnaire d'événements keypress comme indiqué ci-dessous.

HTML 

   <md-input-container>
    <input type="text" (keypress)="omit_special_char($event)" mdInput name="name" [(ngModel)]="company.name" placeholder="Company Name" #name="ngModel" minlength="3" required>
    </md-input-container>

Composant

omit_special_char(event)
{   
   var k;  
   k = event.charCode;  //         k = event.keyCode;  (Both can be used)
   return((k > 64 && k < 91) || (k > 96 && k < 123) || k == 8 || k == 32 || (k >= 48 && k <= 57)); 
}

"event" est l'objet de "$ event" lui-même que vous avez passé plus tôt. Essayez celui-ci, il fonctionnera sûrement avec angular2.

16
Maulik Modi

J'ai combiné plusieurs réponses de ce message et d'autres et j'ai créé ma directive personnalisée pour gérer à la fois la saisie manuelle et le collage de données.

La directive:

import { Directive, ElementRef, HostListener, Input } from '@angular/core';
    @Directive({
        selector: '[appInputRestriction]'
    })
    export class InputRestrictionDirective {
        inputElement: ElementRef;

        @Input('appInputRestriction') appInputRestriction: string;
        arabicRegex = '[\u0600-\u06FF]';

        constructor(el: ElementRef) {
            this.inputElement = el;
        }

        @HostListener('keypress', ['$event']) onKeyPress(event) {
            if (this.appInputRestriction === 'integer') {
                this.integerOnly(event);
            } else if (this.appInputRestriction === 'noSpecialChars') {
                this.noSpecialChars(event);
            }
        }

        integerOnly(event) {
            const e = <KeyboardEvent>event;
            if (e.key === 'Tab' || e.key === 'TAB') {
                return;
            }
            if ([46, 8, 9, 27, 13, 110].indexOf(e.keyCode) !== -1 ||
                // Allow: Ctrl+A
                (e.keyCode === 65 && e.ctrlKey === true) ||
                // Allow: Ctrl+C
                (e.keyCode === 67 && e.ctrlKey === true) ||
                // Allow: Ctrl+V
                (e.keyCode === 86 && e.ctrlKey === true) ||
                // Allow: Ctrl+X
                (e.keyCode === 88 && e.ctrlKey === true)) {
                // let it happen, don't do anything
                return;
            }
            if (['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'].indexOf(e.key) === -1) {
                e.preventDefault();
            }
        }

        noSpecialChars(event) {
            const e = <KeyboardEvent>event;
            if (e.key === 'Tab' || e.key === 'TAB') {
                return;
            }
            let k;
            k = event.keyCode;  // k = event.charCode;  (Both can be used)
            if ((k > 64 && k < 91) || (k > 96 && k < 123) || k === 8 || k === 32 || (k >= 48 && k <= 57)) {
                return;
            }
            const ch = String.fromCharCode(e.keyCode);
            const regEx = new RegExp(this.arabicRegex);
            if (regEx.test(ch)) {
                return;
            }
            e.preventDefault();
        }

        @HostListener('paste', ['$event']) onPaste(event) {
            let regex;
            if (this.appInputRestriction === 'integer') {
                regex = /[0-9]/g;
            } else if (this.appInputRestriction === 'noSpecialChars') {
                regex = /[a-zA-Z0-9\u0600-\u06FF]/g;
            }
            const e = <ClipboardEvent>event;
            const pasteData = e.clipboardData.getData('text/plain');
            let m;
            let matches = 0;
            while ((m = regex.exec(pasteData)) !== null) {
                // This is necessary to avoid infinite loops with zero-width matches
                if (m.index === regex.lastIndex) {
                    regex.lastIndex++;
                }
                // The result can be accessed through the `m`-variable.
                m.forEach((match, groupIndex) => {
                    matches++;
                });
            }
            if (matches === pasteData.length) {
                return;
            } else {
                e.preventDefault();
            }
        }

    }

Usage:

<input type="text" appInputRestriction="noSpecialChars" class="form-control-full" [(ngModel)]="noSpecialCharsModel" [ngModelOptions]="{standalone: true}" [disabled]="isSelected" required>

<input type="text" appInputRestriction="integer" class="form-control-full" [(ngModel)]="integerModel" [ngModelOptions]="{standalone: true}">

C'est en fait ma première réponse stackoverflow, donc j'espère que cela aide.

10
sivi911

exemple de code angular2.

<input type="text" pattern="/[A-Z]{5}\d{4}[A-Z]{1}/i">

ou

<md-input-container>
<input type="text" (keypress)="omit_special_char($event)" mdInput name="name" [(ngModel)]="company.name" placeholder="Company Name" #name="ngModel" minlength="3" required>
</md-input-container>

omit_special_char(val)
{
   var k;
    document.all ? k = this.e.keyCode : k = this.e.which;
    return ((k > 64 && k < 91) || (k > 96 && k < 123) || k == 8 || k == 32 || (k >= 48 && k <= 57));
}

voici l'exemple de travail en javascript pur car angular2/TypeScript ne prend pas en charge dans StackOverflow.

function omit_special_char(e) {
    var k;
    document.all ? k = e.keyCode : k = e.which;
    return ((k > 64 && k < 91) || (k > 96 && k < 123) || k == 8 || k == 32 || (k >= 48 && k <= 57));
}
<input type="text" onkeypress="return omit_special_char(event)"/>
2
Mohideen bin Mohammed

Cette question est également répondue à Comment restreindre les caractères spéciaux dans la zone de texte angularjs

Regarde. Il a des entrées intéressantes.

0
Hemang Rindani

Vous pouvez également utiliser le modèle Regex

<md-input-container>
<input type="text" (ngModelChange)="omit_special_char($event)" mdInput name="name" [(ngModel)]="company.name" placeholder="Company Name" #name="ngModel" minlength="3" required>
</md-input-container>

public omit_special_char(e: any) {
    try {
        let k;
        if (/^[a-zA-Z0-9\s]*$/.test(e.key)) {
            return true;
        } else {
            e.preventDefault();
            return false;
        }
    } catch (e) {
    }
}
0
Nɪsʜᴀɴᴛʜ ॐ

vous pouvez utiliser ng-pattern pour cela. c'est très simple et utile

0
Ragesh Pikalmunde

Vous pouvez utiliser le modèle dans la balise d'entrée Fonctionne avec fine avec angular7.

pour valider les caractères spéciaux

                <input #Name="ngModel" type="text" name="Name" required maxlength="256" minlength="2"
                    [(ngModel)]="Name" class="validate form-control" pattern="^[a-zA-Z0-9]+$">
                </div>

permettant l'utilisation de l'espace => pattern = "^ [a-zA-Z0-9] + $">

utilisation complète avec affichage du message de validation:

                <label for="Name" class="form-label">{{"Name" | localize}}*</label>

                <div class="input-group"><input #dashboardName="ngModel" type="text" name="Name" required maxlength="256" minlength="2"
                    [(ngModel)]="Name" class="validate form-control" pattern="^[a-zA-Z0-9 ]+$">
                </div>
                <validation-messages [formCtrl]="Name"></validation-messages>
            </div>
0
Manu A.T