总和值输入 ngFor / Reactive Form答案

【问题标题】：Total sum value inputs ngFor / Reactive Form总和值输入 ngFor / Reactive Form
【发布时间】：2019-07-14 04:58:55
【问题描述】：

如何获得输入字段中两个值的总和并将结果存储在另一个输入字段中？

类似这样的：

换句话说，这两个值value1 和value2 已经有它们与 *ngFor 但我不能做加法，而且当任何值改变时，结果都会被修改。

component.html

<mat-form-field appearance="outline" class="col-md-3">
  <mat-label>Precio regular</mat-label>
  <input matInput type="number" formControlName="precioRegular" value="{{paquete.precio}}" (change)="updateTotal(paquete.precio)">
</mat-form-field>
<mat-form-field appearance="outline" class="col-md-3">
  <mat-label>Descuento</mat-label>
  <input matInput type="number" formControlName="descuento" value="{{paquete.descuento}}" (change)="updateTotal(paquete.descuento)">
  </mat-form-field>
<mat-form-field appearance="outline" class="col-md-3">
  <mat-label>Precio Final</mat-label>
  <input matInput formControlName="precioFinal" [value]="total">
</mat-form-field>

组件.ts

  total: number;

  this.forma = this.fb.group({
    precioRegular: [  ],
    descuento: [  ],
    precioFinal: [ ],
  });


 updateTotal(item) {
    if (item) {
      this.total += item.value;
    } else {
      this.total -= item.value;
    }
    // console.log(this.total);
  }

【问题讨论】：

似乎不是反应式表单的理想用例。您应该改用模板驱动的表单。
输入表单元素用于收集...来自用户的输入。不存储计算的输出。为什么将输出存储在输入中？
因为用户输入的新数据，以后会存入数据库

标签： angular typescript

【解决方案1】：

您可以订阅响应式表单的更改并使用表单值执行一些操作。

例如：

this.forma.valueChanges.subscribe(value => {
 const sum = calculateSum(value);
 this.forma.get('precioFinal').setValue(sum);
});

【讨论】：

【解决方案2】：

正如我所说，这不是使用反应式表单的理想用例。当您有一个数据模型并且您想围绕它构建一个表单，或者您想根据该数据模型获取表单的值时，您通常会使用反应式表单。

在当前情况下，您最好使用[(ngModel)]。

来，试试看：

<div>
  <mat-form-field appearance="outline" class="col-md-3">
    <mat-label>Precio regular</mat-label>
    <input matInput type="number" [(ngModel)]="model.precioRegular">
  </mat-form-field>
  <mat-form-field appearance="outline" class="col-md-3">
    <mat-label>Descuento</mat-label>
    <input matInput type="number" [(ngModel)]="model.descuento">
  </mat-form-field>
  <mat-form-field appearance="outline" class="col-md-3">
    <mat-label>Precio Final</mat-label>
    <input matInput type="number" [value]="model.precioRegular + model.descuento">
  </mat-form-field>
</div>

在你的模板中：

import { Component } from '@angular/core';

@Component({
  selector: 'form-field-overview-example',
  templateUrl: 'form-field-overview-example.html',
  styleUrls: ['form-field-overview-example.css'],
})
export class FormFieldOverviewExample {
  model = {
    precioRegular: 0,
    descuento: 0,
  };
}

这里有一个Working Sample StackBlitz 供您参考。

【讨论】：

还在Precio Final 输入中添加readonly，这样总数就不能被操纵。 :D
更新了 StackBlitz。谢谢:)

【解决方案3】：

您可以订阅表单的任何更改并将值添加在一起。

this.forma.valueChanges.subscribe(value => { const sum = value.precioRegular + valuee.descuento; this.forma.get('precioFinal').setValue(sum); });

【讨论】：