Problems updating a field based on the selection of another field

-2

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.

    
asked by anonymous 23.08.2018 / 16:35

1 answer

0

I have identified the problem: attributes using "-" voucher-item violate the naming convention. It interprets the "-" as a subtraction. Just use CamelCase voucherIt all worked normally.

    
23.08.2018 / 21:34