ionic2：計算をフォームで行うには？

Question

私は、製品レートと数量入力を持つフォームを持っています。私は値（レート*量）を計算し、値を入力量フィールドに割り当てる必要があります。

以下のコードスニペットを見つけてください：

<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

をあなたはこのために[(ngModel)]を使用する必要があります。

<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> 

これで、静止量入力フィールドが編集可能になりました。この値を変更すると、他の2つの入力値にも影響します。入力を無効にすることができるので、読み取り専用入力として表示されます。これは私のコードで働いた。