web-dev-qa-db-ja.com

入力値を変更angular 5

値を変更したときに、値を送信する方法を教えてください。したがって、この値を変更するときに_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つは、100などの値入力を送信します。これは正しく動作します。 2.この値を変更するときに入力値を送信するため、100から90を変更し、この90を送信します。私の関数はこの最初の値も送信します_sale.amount_paid = this.amountpaid;_

UPDATE：demo 問題の例

問題は、amount_paidフィールドを変更する必要があり、変更した値を保持する必要があることです。値を変更するにはどうすればよいですか？フィールド2のバインディングが必要です。変更できない場合は、get amountpaid() {}を送信します。それ以外の場合は、値の入力を送信します。

画像1値を変更せずにフォームを保存します。 enter image description here 画像2変更した値でフォームを保存しましたが、値は変更されません。コンソールに表示します。

enter image description here

angulartypescriptangular5onchange
5
user9699663

2つのこと：

  1. amount_paidテンプレートは次のようになります。

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

  1. そして.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.
});
_

コメントとあなたの例に基づいて編集します：これが working solution です。少なくとも今回は正しく理解していただければ幸いです。

1
Laker

バインディングを使用しない理由：

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

TypeScript：

     amountpaid:string = '';

     updateForm(ev: any) {
        console.log(this.amountpaid);
      }
0
Abderrahim Soubai Elidrissi