使用(更改)时无法提交值输入 [英] I can't submit a value input when use (change)

问题描述

在我的项目中，我想创建一个发票.在此发票中，我使用函数get subtotal(){}计算值，完全可以正常工作.现在，例如，如果我更改此小计，我想将折扣从100降低到90.

In my project I want to create an invoice. In this invoice I calculate value with a function get subtotal(){}, totally work good. Now, If I change this subtotal, for example, I want to make a discount from 100 to 90.

我已经尝试过此代码，但是它不起作用.拜托，你能建议我如何解决这个问题吗? HTML代码:

I've tried this code but it does not work. Please, can you suggest me how to solve this issue? Html code:

  <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([]),
    });

推荐答案

如果在那里需要预先计算的值，则只需设置控件的值即可.请勿使用视图(HTML)来回传递值.

If you need to have a precalculated value in there, then just set the value of the control. Do not use the view (HTML) to pass the value back and forth.

首先，使用表单构建器创建表单.

First, create your form using the form builder.

然后，使用this.addSale.controls.Subtotal.setValue(this.subtotal)从小计中设置值.小计更改时，请执行此操作.

Then, set the value from subtotal using this.addSale.controls.Subtotal.setValue(this.subtotal). Do this whenever the subtotal changes.

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已经做到了.

在您看来，请使用基本的反应形式绑定.

in your view, use the basic reactive form binding.

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

只要您调用setValue(this.subtotal)

用户可以覆盖当然的值.但是，如果您添加更多产品左右，它可能会被覆盖.如果要防止这种情况，则应注意用户是否已这样做，并防止再用新的小计来更新值.

The user can overwrite the value of course. But it may get overwritten if you add more products or so. If you want to prevent that, you should watch if user has done that and prevent updating the value with new subtotal anymore.

工作演示基于您提供的演示在评论中.

Working demo based on demo you provided in comment.

这篇关于使用(更改)时无法提交值输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！