CODEWITHSUNDEEP
angular
qweqwe
qweqwe

Reputation: 161

how to use oninput in Angular?

I want to limit the input maximum number.

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>

Seem make sense.but have a error "data is not defined"

how to fix it.

I try ngModel but effect is not very good. After exceeding the maximum value, the user can continue to input.

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

Upvotes: 12

Views: 26060

Answers (4)

PaperinFlames
PaperinFlames

Reputation: 942

You can use keyup method in HTML and send $event.target.value as input to your required method.

<input (keyup)="filterData($event.target.value)">

filterData(e){
   console.log(e);
}

Upvotes: 1

user3298852
user3298852

Reputation: 161

If someone is still interested, you can use (input)

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

Upvotes: 16

Muhammed Albarmavi
Muhammed Albarmavi

Reputation: 24434

simply you can use max attribute

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

stackblitz demo

Another way something like this

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

Upvotes: 0

Dimanoid
Dimanoid

Reputation: 7289

  1. You are using same variable for the array and iteration var.
  2. qq[1] is not defined cause it has only 1 member of index 0
  3. There is no oninput event in angular, use ngModel
  4. The code in oninput will not work anyway
  5. Read the tutorial about form and validation: https://angular.io/guide/form-validation#template-driven-validation

Upvotes: -1

Related Questions