J'ai un élément d'entrée pour le code postal. Je souhaite autoriser uniquement les nombres dans la zone de saisie et elle doit être de la forme XXXXX ou XXXXX-XXXX.
Après avoir entré le 5ème chiffre, si l'utilisateur entre le 6ème chiffre, un tiret doit être placé automatiquement après le 5ème chiffre. Et autorisez également l'utilisateur à saisir manuellement le trait d'union uniquement à la 6ème position (après le 5ème chiffre).
Aucun autre personnage ne doit être autorisé. Je ne sais pas comment y parvenir. Veuillez suggérer un moyen efficace de l'implémenter en typographie angulaire ou en Javascript.
3 Réponses :
Vous pouvez résoudre ce problème en vérifiant la dernière touche enfoncée et en l'éliminant s'il ne s'agit pas d'un nombre:
public inputValue: string = '';
validate(params) {
if (params.key >= 0 && params.key <= 9) {
if (this.inputValue.length == 6) {
this.inputValue = this.inputValue.substr(0, 5) + '-' + params.key;
}
} else {
this.inputValue = this.inputValue.substr(0, this.inputValue.length - 1);
}
}
<input type="text" maxlength="10" [(ngModel)]="this.inputValue" (keyup)="validate($event)">
Je vous suggère de vous familiariser avec le fonctionnement des directives dans Angular. Ils sont une partie essentielle du framework et très puissants une fois que vous savez comment ils fonctionnent et que vous pouvez créer vos propres directives personnalisées.
Il existe deux types de directives: structurelles et attributaires. Dans votre situation, la plus appropriée est la directive attribut, qui vous permet de changer l'apparence d'un élément DOM. Liens vers les documents ci-dessous:
Bienvenue dans stackoverflow. Vous devriez avoir à fournir un exemple de code de travail approprié lorsque vous fournissez une réponse. Dans votre réponse, vous pouvez accéder à la section des commentaires.
Je n'ai pas encore le droit de commenter, car ma réputation n'est pas assez élevée. Cela ne m'empêchera pas d'essayer d'aider.
personne ne vous arrêtera jamais. Comprenez simplement, donnez votre réponse avec un exemple de code approprié. Ce serait utile à tout le monde dans la communauté. cela vous serait également utile. :)
J'ai trouvé un outil appelé ngx-mask . N'hésitez pas à répondre si vous avez une solution de codage.
Après l'installation de npm, je l'ai utilisée dans mon élément d'entrée comme suit
<input mask="00000-0000"/>