I do not have much Angular experience and I have a problem that seems simple. I have a master detail crud, and at item launch I have a dropdow of primeng
products and after the selection I need it to update the item.preco
field based on product selection, ie produto.preco
. I have tried in several ways but it is not going, I am not using reactive form. My inputs are [(ngModel)].
The part of the code that I am referring to follows:
<div class="ui-g-8 ui-sm-12 ui-fluid">
<label>Item</label>
<p-dropdown placeholder="Selecione..." [autoWidth]="false"
[filter]="true"
[options]="itens"
[(ngModel)]="comprovante-item.item" name="item"
(onChange)="carregarItens()"
(onClick)="selecionouItem()"
(ngModelChange)="selecionouItem()"
#item="ngModel" required></p-dropdown>
</div>
<div class="ui-g-4 ui-md-3 ui-fluid">
<label>Afetação IGV</label>
<p-dropdown placeholder="Selecione..." [autoWidth]="false"
[filter]="false"
[options]="tiposAfetacoesIGV"
[(ngModel)]="comprovante-item.afetacaoIGV" name="afetacaoIGV"
(onChange)="carregarTiposAfetacoesIGV()"
[ngModelOptions]="{ updateOn: 'change' }"
#afetacaoIGV="ngModel" required></p-dropdown>
<app-message [control]="afetacaoIGV" error="required"
text="Informe o tipo de afetação IGV"></app-message>
</div>
<div class="ui-g-2 ui-sm-2 ui-fluid">
<label>Quantidade</label>
<input pInputText type="number" id="quantidade" name="quantidade" placeholder="0"
[(ngModel)]="comprovante-item.quantidade" (ngModelChange)="calculaTotalItem()"
#quantidade/>
</div>
<div class="ui-g-4 ui-md-2 ui-fluid">
<label>Valor Unitario</label>
<input pInputText readonly type="text" name="valorUnitario" placeholder="0,00"
currencyMask [options]="{ prefix: '', thousands: '.', decimal: ',', allowNegative: false }"
[(ngModel)]="comprovante-item.valorUnitario"
#valorUnitario="ngModel">
</div>
<div class="ui-g-4 ui-md-2 ui-fluid">
<label>Valor Desconto</label>
<input pInputText type="text" name="valorDesconto" placeholder="0,00"
currencyMask [options]="{ prefix: '', thousands: '.', decimal: ',', allowNegative: false }"
[(ngModel)]="comprovante-item.valorDesconto" (ngModelChange)="lancouDesconto()"
#valorDesconto="ngModel">
</div>
<div class="ui-g-4 ui-md-2 ui-fluid">
<label>Valor com IGV</label>
<input pInputText readonly type="text" name="comprovante-item.valorIGV" placeholder="0,00"
currencyMask [options]="{ prefix: '', thousands: '.', decimal: ',', allowNegative: false }"
[(ngModel)]="comprovante-item.valorIGV"
#valorIGV="ngModel">
</div>
<div class="ui-g-4 ui-md-2 ui-fluid">
<label>Valor Total</label>
<input pInputText readonly type="text" name="comprovante-item.valorIGV" placeholder="0,00"
currencyMask [options]="{ prefix: '', thousands: '.', decimal: ',', allowNegative: false }"
[(ngModel)]="comprovante-item.valorTotal"
#valorTotal="ngModel">
</div>
<div class="ui-g-1 ui-sm-4 ui-fluid">
<br />
<button pButton type="button" icon="pi pi-plus"
(click)="incluirItem()"
[disabled]="!item.value || !quantidade.value"></button>
</div>
</div>
The methods I used to respond to the actions were:
selecionouItem() {
this.comprovanteItem.valorUnitario = this.comprovanteItem.item.valorUnitario;
this.comprovanteItem.tipoAfetacaoIGV = this.comprovanteItem.item.tipoAfetacaoIGV;
this.comprovanteItem.valorIGV = this.comprovanteItem.item.valorUnitario +
(this.comprovanteItem.item.valorUnitario * this.comprovanteItem.item.tipoAfetacaoIGV.tipoTributo.aliquota);
console.log(this.comprovanteItem.valorUnitario);
console.log('selecionouItem');
}
lancouDesconto() {
this.comprovanteItem.valorIGV = (this.comprovanteItem.item.valorUnitario - this.comprovanteItem.valorDesconto) +
(this.comprovanteItem.item.valorUnitario * this.comprovanteItem.item.tipoAfetacaoIGV.tipoTributo.aliquota);
console.log('lancouDesconto');
this.calculaTotalItem();
}
calculaTotalItem() {
this.comprovanteItem.valorTotal = this.comprovanteItem.valorIGV *
this.comprovanteItem.quantidade;
console.log('calculouTotal');
}
The problem is that when I select the dropdown item it updates the price of the item, when I launch the amount it updates the totals field and if there is a discount release it updates the IGV value and the total. But the fields do not refresh even with the events being activated.
I hope I have been clear.