改变输入值角度5

Question

拜托，我可以建议我在更改时如何提交我的价值？ 所以，我想在更改此值时提交amount_paid 。 为了解决这个问题，我创建了一个返回值的函数更改。 我需要提交的这个值。 我试过这段代码：

模板代码：

 <div class="input-field col s2" style="float: right;">
      <label for="amount_paid">Amount Paid:</label>
      <input id="amount_paid" [value]="amountpaid" type="number" class="validate" (change)="updateForm($event)">
 </div>

Ts码：

    this.addsale = this.fb.group({
      'invoice_number': new FormControl('', [Validators.required, Validators.nullValidator]),
      'client_id': new FormControl('', Validators.required),
      'amount_paid': new FormControl('', Validators.required),
      'products': this.fb.array([]),
    });

  updateForm(ev: any) {
    this.addsale['controls']['amount_paid'].setValue(ev.target.value);
    console.log(ev.target.value)
  }

  onaddsale() {
    let sale = this.addsale.value;
    sale.amount_paid = this.amountpaid; //I used this, because I want to submit this value If I don't want to change. 
    let newSale = new Sale(sale);
    console.log(newSale)
    console.log(this.addsale.controls.amount_paid.value) // Value input when I chane
   }

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

请我有2个情况，1，我提交值输入，ex，100。这项工作正常。 2.当我更改此值时，我提交输入值，因此，从100我想要更改90，而这90我想提交。 我的功能也提交了这个第一个值sale.amount_paid = this.amountpaid;

更新：我的问题的演示示例

问题是，应修改amount_paid字段，并保留修改后的值。 如何修改我的价值？ 我希望字段有两个绑定，如果我无法更改，请提交get amountpaid() {}否则提交我的值输入。

图1我保存表单而不更改值。 图2我使用更改的值保存表单，但值不会更改。 在控制台中显示。

Answer 1

两件事情：

1. amount_paid模板应如下所示：

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

2. 在.ts：

   this.addsale.controls['amount_paid'].valueChanges.subscribe(value => { amount_paid is in value and it's called every time the value changes. });

或整个表格：

this.addsale.valueChanges.subscribe(value => {
    // whole form object is in value and it's called every time any form field changes.
});

根据评论和您的示例进行编辑：这是可行的解决方案 。 至少我希望这次我能正确理解你。

Answer 2

为什么不使用绑定：

<input id="amount_paid" [(ngModel)]="amountpaid" type="number" class="validate" (change)="updateForm($event)">

打字稿：

     amountpaid:string = '';

     updateForm(ev: any) {
        console.log(this.amountpaid);
      }