Componente não chama o método - resolvido

Front-end
#1

Estou usando este componente

<mat-form-field appearance="legacy">
                              <mat-label>Valor</mat-label>
                              <input
                                (change)="somarTotal()"
                                [(ngModel)]="item.valorFornecedor"
                                matInput
                                currencyMask
                                [options]="{
                                  prefix: '',
                                  suffix: '',
                                  thousands: '.',
                                  decimal: ','
                                }"
                              />
                            </mat-form-field>

O método chamado é:

somarTotal(): void {
    let total = 0;
    this.pedido.itens.forEach(
      (item: any) => (total = total + item.valorFornecedor * item.quantidade)
    );
    this.pedido.total = total;
  }

Não chama o método. Só chama se o componente ficar assim, isto é, se eu tirar o currencyMask.

<mat-form-field appearance="legacy">
                              <mat-label>Valor</mat-label>
                              <input
                                (change)="somarTotal()"
                                [(ngModel)]="item.valorFornecedor"
                                matInput
                                [options]="{
                                  prefix: '',
                                  suffix: '',
                                  thousands: '.',
                                  decimal: ','
                                }"
                              />
                            </mat-form-field>

O que pode ser ?

#2

Tente usar com ngModelChange:

(ngModelChange)="somarTotal()"
1 curtida
#3

Ele chama o metodo, mas não pega o valor que está no momento. Pega o valor anterior

#4

Tenta passar o valor do campo como argumento:

(ngModelChange)="somarTotal(item.valorFornecedor)"
1 curtida
#5

Acho que com o ngModelChange era para vc recuperar o valor atual. Veja esse exemplo usando o change e o ngModelChange: StackBlitz

FONTE: https://www.techboxweb.com/difference-between-angular-change-and-ngmodelchange/

1 curtida
#6

A principio está funcionando assim:
html

<mat-form-field appearance="legacy">
                              <mat-label>Valor</mat-label>
                              <input
                                [(ngModel)]="item.valorFornecedor"
                                matInput
                                currencyMask
                                [options]="{
                                  prefix: '',
                                  suffix: '',
                                  thousands: '.',
                                  decimal: ','
                                }"
                                (ngModelChange)="somarTotal(item)"
                              />
                            </mat-form-field>

ts

async somarTotal(itemDigitado: any): Promise<any> {
    let total = 0;
    this.pedido.itens.forEach((item: any) => {
      if (item.id === itemDigitado.id) {
        itemDigitado.total = itemDigitado.valorFornecedor * item.quantidade;
        total = total + itemDigitado.total;
      } else {
        total = total + item.total;
      }
    });
    this.pedido.total = total;
  }

Não sei porque não está funcionando com o ( change). Tenho outros componentes <input que funcionam

1 curtida
#7

De qual pacote é esse currencyMask?

Se for esse: GitHub - cesarrew/ng2-currency-mask: A very simple currency mask directive that allows using a number attribute with the ngModel., parece que é um bug conhecido, mas ainda não solucionado: Binding to (change) event · Issue #51 · cesarrew/ng2-currency-mask · GitHub

1 curtida
#8

“ngx-currency”: “^2.5.2”,

#9

Parece ter um bug também: Event (input) dosen't work · Issue #89 · nbfontana/ngx-currency · GitHub

1 curtida
#10

Atualizei para “ngx-currency”: “^2.5.3”, e continuou na mesma com (change)="somarTotal()"

#11

Pois eh, parece realmente um bug em aberto ainda. Ainda mais que a issue ainda está aberta.

Tu chegou a ver esse link: StackBlitz? Nele tem um exemplo onde o ngModelChange funciona pegando o valor atual do campo.

1 curtida
#12

Vi,

Até fiz assim Componente não chama o método - #6 por guilhermebhte, e funcionou

1 curtida