使用时无法提交值输入（更改）

Question

在我的项目中，我想创建一张发票。在这张发票中，我使用函数get subtotal(){} 计算价值，效果很好。现在，如果我更改此小计，例如，我想将折扣从 100 降至 90。

我已经尝试过这段代码，但它不起作用。拜托，你能建议我如何解决这个问题吗？ html代码：

  <div class="input-field col s2" style="float: right;">
      <input formControlName="Subtotal " id="Subtotal " [value]="subtotal " type="number" class="validate" (change)="updateForm($event)">
    </div>

ts 代码：

  updateForm(event) {
    console.log(event)
    let amountpaidd = event.target.value
     this.addsale['controls']['Subtotal '].setValue(amountpaidd );
   }
  onaddsale() {
    let sale = this.addsale.value;
    sale.Subtotal = this.subtotal;
    let newSale = new Sale(sale);
    console.log(newSale)}

 get subtotal() {
    return this.products
      .map(p => p.p_Unit_price * p.p_Quantity)
      .reduce((a, b) => a + b, 0);
  }

谢谢！

更新：

this.addsale = this.formbuilder.group({
      'Subtotal ': new FormControl('', Validators.required),
      'products': this.formbuilder.array([]),
    });

Answer 1

如果您需要在其中有一个预先计算的值，那么只需设置控件的值。不要使用视图 (HTML) 来回传递值。

首先，使用表单生成器创建表单。

然后，使用this.addSale.controls.Subtotal.setValue(this.subtotal) 设置小计中的值。每当小计发生变化时执行此操作。

ngOnInit() {
  this.service.productList.subscribe(productList => {
    this.products = productList;
    this.addsale.controls.Subtotal.setValue(this.subtotal)
  });
}

不要不要使用sale.Subtotal = this.subtotal。

let sale = this.addsale.value 已经这样做了。

在您看来，使用基本的响应式表单绑定。

 <input formControlName="Subtotal" id="Subtotal" type="number" class="validate">

每当您拨打setValue(this.subtotal)时，您的值都会更新

用户当然可以覆盖该值。但如果您添加更多产品，它可能会被覆盖。如果你想防止这种情况发生，你应该注意用户是否已经这样做了，并防止再用新的小计更新值。

Working demo 基于您在评论中提供的演示。