CODEWITHSUNDEEP
javascriptangulartypescript
S.Kos
S.Kos

Reputation: 221

Angular - get value from list of inputs after change one of them

I have such template:

<tr *ngFor="let row of tableData; let rowIndex = index">
  <td *ngFor="let cell of row; let i = index">
    {{ cell != 'div1' ? cell : '' }}

  <div *ngIf="cell == 'div1'" class="table-div" #div1>
    <md-input-container>
       <input mdInput placeholder="Amount" autocomplete="off"
        min="100" value="0" #div1A>
    </md-input-container>

    <md-input-container>
       <input mdInput placeholder="percent" autocomplete="off"
        min="100" value="0" #div1p>
    </md-input-container>

    <md-input-container>
       <input mdInput placeholder="qnt" autocomplete="off"
        min="100" value="0" #div1q>
    </md-input-container>
</div>
</td>
</tr>

This div displayed in loop. When I change value in one input I need to recalculate values in two others inputs fields.

Can anyone tell how to do this?

Upvotes: 1

Views: 1785

Answers (3)

masterpreenz
masterpreenz

Reputation: 2290

The way I will implement something like this is give them their own ngModels that are tied up to row object:

<tr *ngFor="let row of tableData; let rowIndex = index">
  <td *ngFor="let cell of row; let i = index">

    {{ cell != 'div1' ? cell : '' }}

    <div *ngIf="cell == 'div1'"
          class="table-div"
         #div1>

      <md-input-container>
        <input mdInput
               placeholder="Amount"
               autocomplete="off"
               min="100"
               value="0"
             [(ngModel)]="row.amount"
              (ngModelChange)="onAmountChange(row)"
               #div1A>
      </md-input-container>

      <md-input-container>
        <input mdInput
               placeholder="percent"
               autocomplete="off"
               min="100"
               value="0"
             [(ngModel)]="row.percent"
               #div1p>
      </md-input-container>

      <md-input-container>
        <input mdInput
               placeholder="qnt"
               autocomplete="off"
               min="100"
               value="0"
             [(ngModel)]="row.qnt"
               #div1q>
      </md-input-container>
    </div>
  </td>
</tr>

then in your JS catch onAmountChange(row):

onAmountChange(row: any)
{
    // here modify your desired values every time amount changes
    // row.percent = 0;
    // row.qnt     = 0;
}

hope that helps

Upvotes: 1

Raja Mohamed
Raja Mohamed

Reputation: 1026

Add this line in every input tag 

(ngModelChange)="saverange(rowIndex, i)"

Do the calculation on this method 

saverange(a,b){
  //Now update only this variable
  this.dataTable[a] 
 // Update all three values of ngmodal
 }

Upvotes: 0

ice 13
ice 13

Reputation: 333

Create a Value property under cell and then you can use 2 way binding as following on first input

[(ngModel)]="cell.Value"

And for the other 2 inputs create one way binding like

[ngModel]="cell.Value * 2"
[ngModel]="cell.Value * 2 + 20"

Upvotes: 0

Related Questions