web-dev-qa-db-fra.com

Angular6: Comment limiter le caractère spécial dans l'entrée de matériau

J'ai un contrôle de saisie matérielle, j'ai restreint le caractère spécial pendant la saisie, mais lorsque vous tapez des mots dans n'importe quel éditeur, copiez et collez les mots avec le caractère spécial, ce qui ne fonctionne pas.

J'ai écrit la directive pour que pour éviter le caractère spécial, mais peut-on fournir la meilleure solution restreindre en copier-coller.

app.component.html:

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input matInput specialIsAlphaNumeric placeholder="Favorite food" value="Sushi">
  </mat-form-field>

  <mat-form-field class="example-full-width">
    <textarea matInput placeholder="Leave a comment"></textarea>
  </mat-form-field>
</form>

directif:

import { Directive, HostListener, Input } from '@angular/core';
@Directive({
    selector: '[specialIsAlphaNumeric]'
})
export class SpecialCharacterDirective {

    regexStr = '^[a-zA-Z0-9_]*$';
    @Input() isAlphaNumeric: boolean;

    @HostListener('keypress', ['$event']) onKeyPress(event) {
        return new RegExp(this.regexStr).test(event.key);
    }

}

démo voir ici :

https://stackblitz.com/edit/angular-cijbqy-biwrck?file=app%2Finput-overview-e[stackblit ][1]

Étapes à suivre pour reproduire:

taper le caractère spécial qui n’est pas autorisé: fonctionne correctement . pendant que le copier-coller habilite le caractère spécial

angularangular5angular2-directivesangular6angular-directive
3
Mohamed Sahir

Essayez comme ça:

exemple stackblitz

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

  regexStr = '^[a-zA-Z0-9_]*$';
  @Input() isAlphaNumeric: boolean;

  constructor(private el: ElementRef) { }


  @HostListener('keypress', ['$event']) onKeyPress(event) {
    return new RegExp(this.regexStr).test(event.key);
  }

  @HostListener('paste', ['$event']) blockPaste(event: KeyboardEvent) {
    this.validateFields(event);
  }

  validateFields(event) {
    setTimeout(() => {

      this.el.nativeElement.value = this.el.nativeElement.value.replace(/[^A-Za-z ]/g, '').replace(/\s/g, '');
      event.preventDefault();

    }, 100)
  }

}
6
AashishJ

Vous pouvez utiliser Ng Knife utility

  1. Importer NgKnifeModule

    ... 
import { NgKnifeModule } from 'ng-knife';
...
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgKnifeModule
  ],
  ...
});
export class AppModule { }

  2. En l'utilisant:

    <!-- Aphanumeric -->
<input knifeAlphanumeric type="text">
0
Marcelo