Fetching value of dynamic input type in angular 5

Question

I am running with a problem in which I have a requirement to create dynamic row of inputs on click of Add. I bind my model with element using index and its all working fine.

<div class="row" *ngFor="let field of fieldArray; let i = index">
  <div class="col-sm-2 form-group">
    <label for="grid-input-19">Service Name</label>
      <select class="form-control" name="Service-{{i}}" [(ngModel)]="field.selectedService" #Service="ngModel" (ngModelChange)="onChange($event)">
          <option *ngFor="let service of serviceList" [selected]="service.Service == field.selectedService"
                  [ngValue]="service">
            {{service.Service}}
          </option>
        </select>
      </div>
      <div class="col-sm-4 form-group">
        <div class="form-group">
          <label for="grid-input-18">Service Description</label>
          <textarea rows="1" name="Description-{{i}}" [(ngModel)]="field.selectedService.Description" required
                    class="form-control" [readonly]="true"></textarea>
        </div>
      </div>
      <div class="col-sm-1 form-group">
        <label>Quantity</label>
        <input type="number" min="1" value="1" step="any" name="Quantity-{{i}}" id="daterange-5" [(ngModel)]="field.selectedService.Quantity" required
               maxlength="50" class="form-control" (blur)="onQuantityChange($event.target.value)">
      </div>
      <div class="col-sm-2 form-group">
        <label>Price</label>
        <input type="number" min="0" value="0" step="any" name="Price-{{i}}" id="daterange-5" [(ngModel)]="field.selectedService.Price" required
               maxlength="50" class="form-control" [readonly]="true">
      </div>
    </div>
</div>

Question is on Quantity change I am calling a function which requires to modify prices. But quantity of every row input is changing all together. Suppose there are three rows of input. So on changing Quantity of first row input. All are deflecting together. What am I doing wrong.

onQuantityChange(quantity) {
    // How do I bind the value of row input price which is created dynamically on quantity change
    this.field.Price *= parseInt(quantity);
}

Any help would be appreciated !

I already did and it is not a table these are div's created dynamically. There is a problem in binding I think so. — Himanshu
– Himanshu, Commented Apr 6, 2018 at 11:19
@ManojChalode I have added the code where I wants to set the value of price input created dynamically on Quantity change — Himanshu
– Himanshu, Commented Apr 6, 2018 at 11:42

Bhuvana Basanth · Accepted Answer · 2018-04-06 13:15:54Z

1

Try generating the id for the input quantity & price uniquely using the index value from ngFor like u did for name.

<input type="number" min="1" value="1" step="any" name="Quantity-{{i}}" id="quantity{{i}}">
<input type="number" min="1" value="1" step="any" name="price-{{i}}" id="price{{i}}">

Once you have a unique id, u will be able to recognize quantity & price using the event id.

onQuantityChange(quantity,event) {
    this.fieldID = event.target.id.replace( /^\D+/g, '');  
              // output will be something like 0 for first quantity
              //then   get correcponding price element and multiply
    this.field.Price *= parseInt(quantity);  
}

edited Apr 6, 2018 at 13:15

answered Apr 6, 2018 at 12:12

Bhuvana Basanth

393 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Fetching value of dynamic input type in angular 5

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related