Problems updating a field based on selecting another field

Question

I don’t have much experience in Angular and I have a problem that seems to be simple. I have a crud master detail, and at the item launch I have a dropdow of products from primeng and after the selection I need it to update the field item.preco based on product selection, i.e. produto.preco. I tried several ways but it’s not going, I’m not using reactive form. My inputs are [(ngModel)].

The part of the code I refer 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’ve worked out to answer the steels 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 selecting the dropdown item it updates the item price, when releasing the quantity 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 update even with events being activated. I hope I was clear.

Answer 1

I identified the problem: the attributes that used "-" proof-item violate the naming convention. It interprets the "-" as a subtraction. Just using Camelcase proof Everything worked normally.