离子2:如何形式进行计算

Question

i具有产品速率和数量输入的形式。我需要计算值（速率 *数量）并将值分配给量输入字段。

请在下面找到代码段：

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

现在，此后仍然可以食用量输入字段。更改此值也会影响其他两个输入值。您可以禁用输入，因此它将显示为仅读取输入。这在我的代码中起作用。