5
votes

La directive angulaire 6 numberonly ne fonctionne pas

J'ai créé une directive à partir de https://www.davebennett.tech / angular-4-input-numbers-directive / afin que je puisse limiter les utilisateurs à saisir uniquement des chiffres dans le numéro de téléphone. Dans le fichier src / app / app.sharerd.module.ts , j'ai fait le code ci-dessous pour importer la directive:

<input type="text" name="phone" myNumberOnly ... > ...
...

Maintenant, sous / src / dossier J'ai créé des dossiers nommés modules/auth/component/.

Sous auth.module.ts dans le / src / auth / , j'ai fait ce qui suit:

import { NgModule } from '@angular/core';
import { SharedModule } from '../../app/app.shared.module';
...
...

Maintenant, dans le signup.html sous / src / auth / component / :

import { NumberOnlyDirective } from './number.directive';
declarations: [..., ..., NumberOnlyDirective], ...
export class SharedModule { }

Je peux toujours saisir des caractères / caractères spéciaux, etc. dans la zone de texte, cependant, je n'ai vu aucune erreur dans la console / cli.

angular angular6 angular-directive

2 commentaires

Essayez de mettre votre NumberOnlyDirective également dans les exportations de votre module partagé.

Ajoutez ceci comme votre réponse.

3 Réponses :

12
votes

Lorsque vous utilisez une directive / pipe personnalisée dans un module partagé, vous devez l'exporter également.

Fondamentalement, dans votre tutoriel, il a créé la directive et l'a déclarée dans le module d'application. Mais dans votre exemple, vous mettez votre directive dans un module partagé, vous devez donc mettre votre directive dans le crochet des déclarations mais aussi dans les exports.

shared.module.ts :

@NgModule({
    /* ... */
    declarations: [YourDirective],
    exports: [YourDirective]
    /* ... */
})

0 commentaires

0
votes

Trois astuces de débogage de directive rapide:

Mettez une instruction debugger; dans le constructeur de votre directive. Vous saurez alors avec certitude quand cela fonctionne et vous pourrez le supprimer.
Assurez-vous que vous disposez du selector: '[magicFeature]' et non du selector: 'magicFeature'
Parfois, vous devez redémarrer votre ng serve pour vous assurer que tout est actualisé.

0 commentaires

0
votes

Essayez ceci:

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

@Directive({
  selector: 'input[type=number], input[numbersOnly]'
})
export class NumbersOnlyInputDirective {

  constructor(private elRef: ElementRef) { }

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

}

0 commentaires