change input value by component

Question

guys I have an input that when changing the value it executes a function in the component

    <input class="form-control" (change)="updateQuantidade($event.target.value, item)" type="number" name="quantity" min="1" max="{{item.estoque.estAtual}}" value="{{item.quantidade}}">



updateQuantidade(value: string, item: IItem) {
this.quantidade = Number(value);
if (Number(value) > item.estoque.estAtual) {
  this.quantidade = this.item.estoque.estAtual;
  item.quantidade = this.quantidade
  this.modalS.createModal(MdAlertComponent, { title: 'Estoque insuficiente', message: `Só há ${item.estoque.estAtual} unidade(s) deste item em estoque` });
}

}

if item.quantidade is greater than item.estoque.estAtual

it changes the value of this.quantidade for the same value of this.item.estoque.estAtual

in the component it changes the value, but in the input it remains the old value, can someone help me with this?

<div class="col-sm-5">
<dt *ngIf="this.quantidade > item.estoque.estAtual" 
style="padding-right: 10px;">Em estoque: 
{{item.estoque.estAtual}} </dt>
<h5>{{this.quantidade}}</h5>this.quantidade
<h5>{{item.estoque.estAtual}}</h5>item.estoque.estAtual

<dl class="dlist-inline">
<dt style="padding-right: 10px;">Quantidade: </dt>
<dd>
    <input class="form-control" [(ngModel)]="this.quantidade" 
(ngModelChange)="updateQuantidade(item)" type="number" 
name="quantity" min="1" max="{{item.estoque.estAtual}}" >

<!--<input class="form-control" 
(change)="updateQuantidade($event.target.value, item)" 
type="number" name="quantity" min="1" max=" 
{{item.estoque.estAtual}}" value="{{item.quantidade}}">
--></dd>
  </dl>
<div>
  </div>
</div>

The new html code

<input
class="form-control"
[(ngModel)]="quantidade"
                          
(ngModelChange)="updateQuantidade(item)"
type="number"
name="quantity"
min="1"
/>

if you just put a value like 5 for example, it replaces it with 3, but if you put a 4 right after 3, getting a total of 34 it doesn't do the replacement i made one stackblitz for help https://stackblitz.com/edit/angular-1gv68s?file=src/app/app.component.ts

Théophile Wallez · Accepted Answer · 2022-07-18 20:39:23Z

1

You need to use [(ngModel)]="this.quantidade"instead of using the $event.target.value, and use (ngModelChange) to call a function on change. Note: you don't need to use value="{{item.quantidade}}" anymore since [(ngModel)] will automatically bind the input to this.quantidade.

In your .html file:

<input 
   class="form-control" 
   [(ngModel)]="quantidade"
   (ngModelChange)="updateQuantidade(item)" 
   type="number" 
   name="quantity" 
   min="1" 
/>

In your component.ts file:

updateQuantidade( item: IItem) {
  if (this.quantidade > item.estoque.estAtual) {
    this.quantidade = this.item.estoque.estAtual;
    item.quantidade = this.quantidade
    this.modalS.createModal(MdAlertComponent, { title: 'Estoque insuficiente', 
    message: `Só há ${item.estoque.estAtual} unidade(s) deste item em estoque` 
   });
  }
}

edited Jul 18, 2022 at 20:39

answered Jul 18, 2022 at 18:19

Théophile Wallez

4895 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Suporte Esallabs Over a year ago

the code worked, but when testing I put the this.quantidade = 55 and the item.estoque.estAtual = 3 it updates on this.quantidade but they don't update in the input, that's strange

Suporte Esallabs Over a year ago

if I put values like 11,23,25 it updates in the input too, but values like 44,55,60,61 it doesn't update in the input

Suporte Esallabs Over a year ago

values like 4,5,6,7 it only updates on the this.quantidade but it doesn't update in the component

Suporte Esallabs Over a year ago

I will show a print to make it clearer, at the top of the question

Suporte Esallabs Over a year ago

the limit is 3, values that start with the first value below 3, for example 11,21,25 it is changed in the input, but values that start with 3 or are greater than 3 it changes in the item.quantidade, but does not change in the input

|

Collectives™ on Stack Overflow

change input value by component

1 Answer 1

12 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Related