изменить входное значение угловое 5

Question

Пожалуйста, можете ли вы предложить мне, как передать мою стоимость, когда я ее изменю? Итак, я хочу отправить amount_paid при изменении этого значения. Для решения этой проблемы я создаю функцию change, которая возвращает мне значение. Это значение мне нужно представить. Я попробовал этот код:

Код шаблона:

 <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>

Тс код:

    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, я отправляю значение ввода, например, 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);
      }