web-dev-qa-db-fra.com

Typescript + Html: Comment forcer les majuscules dans un champ de saisie

Je travaille avec angular (TypeScript) et j’ai un modèle en HTML où l’utilisateur doit insérer un champ de code et un champ de description.

Le champ de code doit toujours être saisi par l'utilisateur, toujours en majuscule.

J'ai trouvé et suivi cette question: Comment convertir une valeur d'entrée en majuscule dans angular 2 (valeur transmise à ngControl)

mais la dernière lettre insérée par l'utilisateur reste cependant en minuscule. L'essentiel est que la base de données vienne toujours en majuscule (je mets également une limite de 4 caractères qui fonctionne correctement). Ceci est mon code maintenant, mais comme écrit plus haut, ne fonctionne pas correctement:

<input type="text" id="code" #code class="form-control" formControlName="code" maxlength="4"
                 (input)="code.value=$event.target.value.toUpperCase()">

quelqu'un a-t-il trouvé une solution rapide, fonctionnelle et rapide?

je vous remercie!

javascripthtmlangulartypescript
10
Nobady

Vous pouvez simplement ajouter oninput="this.value = this.value.toUpperCase()" dans votre <input> tag et convertira instantanément toute entrée de votre champ d’entrée en majuscule.

35
Ali Heikal

Si vous travaillez avec ngModel, vous pouvez utiliser ngModelChange de cette manière avec JavaScript . ToUpperCase () .

<input [ngModel]="person.Name" (ngModelChange)="person.Name = $event.toUpperCase()">
6
DForsyth

Vous pouvez utiliser un attribut pattern pour limiter les entrées autorisées. Vous voudrez peut-être aussi aider l’utilisateur en mettant leur cas en majuscule.

<input type="text" pattern="[A-Z]*" name="example" />
3
Fenton

Cela a fonctionné pour moi. Je viens d'utiliser keyup et chaque fois qu'un utilisateur ajoute un caractère, il le convertit automatiquement en majuscule, non seulement dans l'interface utilisateur, mais également dans le modèle.

(keyup)="form.patchValue({name: $event.target.value.toUpperCase()})"
0
Edrica J