ionic2: How to do calculations in form? - ionic-framework

Question

I have a form with product rate and quantity inputs. I need to calculate the value (rate * quantity) and assign the value to amount input field.
Please find the code snippet below:
<form [formGroup]="additemForm" (ngSubmit)="submit(additemForm.value)" >
<ion-row>
<ion-col>
<ion-list inset>
<ion-item>
<ion-label>Product :</ion-label>
<ion-select formControlName="product">
<ion-option *ngFor="let product of productArray" value="{{product.code}}" selected="false">{{product.name}}</ion-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label>QUANTITY :</ion-label>
<ion-input type="number" formControlName="qty"></ion-input>
</ion-item>
<ion-item>
<ion-label>RATE:</ion-label>
<ion-input type="number" formControlName="rate"></ion-input>
</ion-item>
<ion-item>
<ion-label>Value :</ion-label>
<ion-input type="number" formControlName="value"></ion-input>
</ion-item>
</ion-list>
</ion-col>
</ion-row>
<ion-row>
<ion-col class="signup-col">
<button ion-button class="submit-btn" type="submit" [disabled]="!additemForm.valid">Submit</button>
<button ion-button type="button" (click)='cancel()' >Cancel</button>
</ion-col>
</ion-row>
</form>

Answer 1

You need to use [(ngModel)] for this.
<ion-item>
<ion-label>QUANTITY :</ion-label>
<ion-input type="number" formControlName="qty" [(ngModel)]="quantity"></ion-input>
</ion-item>
<ion-item>
<ion-label>RATE:</ion-label>
<ion-input type="number" formControlName="rate" [(ngModel)]="rateValue"></ion-input>
</ion-item>
<ion-item>
<ion-label>Value :</ion-label>
<ion-input type="number" formControlName="value" [(ngModel)]="rateValue * quantity"></ion-input>
</ion-item>
Now, still amount input field will be edible after this. And changing this value will affect the other 2 input values also. You can disable the input, so it will appear as a read-only input. This worked in my code.