2
votes

comment utiliser oninput en angulaire?

Je veux limiter le nombre maximum d'entrée.

data = [
   {
     qq:[30]
   },
   {
     qq:[100]
   }


<div *ngFor="let data of data">

      max{{data.qq[0]}}

      <input type="number" id="test" oninput="if(value > data.qq[0]) value = data.qq[0]">

    </div>

Cela semble logique, mais j'ai une erreur "les données ne sont pas définies"

comment y remédier.

J'essaye ngModel mais l'effet n'est pas très bon. Après avoir dépassé la valeur maximale, l'utilisateur peut continuer à entrer.

https: // stackblitz .com / edit / angular-s5uwe6? file = src% 2Fapp% 2Fapp.component.ts

angular

0 commentaires

3 Réponses :

0
votes

Vous utilisez la même variable pour le tableau et la var d'itération.
qq [1] n'est pas défini car il n'a qu'un seul membre d'index 0
Il n'y a pas d'événement oninput en angulaire, utilisez ngModel
Le code dans oninput ne fonctionnera pas de toute façon
Lisez le didacticiel sur le formulaire et la validation: https://angular.io / guide / form-validation # template-driven-validation

2 commentaires

pourquoi n'y aurait-il pas un oninput en angular? C'est JS valide :)

J'essaye ngModel mais l'effet n'est pas très bon. Après avoir dépassé le nombre maximum, l'utilisateur peut continuer la saisie. stackblitz.com/edit/…

0
votes

vous pouvez simplement utiliser l’attribut max

  <input type="number" id="test" #v  (change)="+v.value > data.qq[0]? v.value = data.qq[0]:0">

démo stackblitz

Une autre façon quelque chose comme ça

  <input type="number" id="test" [max]="data.qq[0]">

1 commentaires

(ngModelChange) = "+ v.value> data.qq [0]? v.value = data.qq [0]: 0" Cela fonctionne pour moi. Merci

3
votes

Si quelqu'un est toujours intéressé, vous pouvez utiliser (input)

<input type="number" id="test" (input)="yourFunction()">

0 commentaires