Исправить значение чтения из другой строки в реактивных формах в угловых

Question

Как я могу исправить это изменение, которое возвращается? Изменение Amount To Pay - Total Amount, Проблема в том, что он не меняется после того, как я оценил количество. Это только изменит значение после того, как я изменю что-то на входе Сумма к оплате? Вот плунжер, который я сделал.

КОДЫ ПЛАНКЕРА ЗДЕСЬ

onChanges(): void {
  this.invoiceForm.get('amount').valueChanges.subscribe(val => {
    return this.change = this.invoiceForm.get('amount').value - this.invoiceForm.get('summed').value
  });
}

Answer 1

То, что вы в настоящее время делаете, это своего рода смешивание шаблонно-управляемых форм и реактивных форм, пытаясь прикрепить [ngModel] вход в вашу форму управления. Что вы хотите сделать, это установить значение этого элемента управления формы с помощью API реактивных форм, в частности, .setValue() метод. Это позволяет вам обновлять значение вашего элемента управления формы из класса компонента.

Я разбудил ваш планкр и обновил его рабочим кодом: http://plnkr.co/edit/WqkJpzgdGakHjM2Mnk59?p=preview

Я предоставлю важные вещи здесь для справки:

this.invoiceForm.get('itemRows').valueChanges.subscribe(values => {
    this.invoiceForm.get('summed')
      .setValue(values.reduce((acc, cur) => acc + cur.itemamt, 0));
});

this.invoiceForm.get('summed').valueChanges.subscribe(value => {
  this.setChange();
});

this.invoiceForm.get('amount').valueChanges.subscribe(() => {
  this.setChange();
});

Затем определите setChange метод как:

setChange(): void {
  const change = this.invoiceForm.get('amount').value - 
                 this.invoiceForm.get('summed').value;
  this.invoiceForm.get('change').setValue(change);
} 

Узнайте больше о реактивных формах здесь: https://angular.io/guide/reactive-forms.