Angular 反應式兩種方式的數據綁定

Question

我正在嘗試構建一個 Angular 反應形式，其中輸入字段值根據其他字段中的輸入進行更新。 三個輸入字段amount 、 price和total應該反映變化，以便amount * price = total成立。 完整代碼https://stackblitz.com/edit/angular-e7rnxf

 import { Component, Input } from '@angular/core'; import { FormBuilder } from '@angular/forms'; @Component({ selector: 'hello', template: ` <form [formGroup]="orderForm" (ngSubmit)="onSubmit()"> Amount: <input (keyup)="onAmountChange($event)" formControlName="amount">{{ orderForm.value.amount }}<br> Price: <input (keyup)="onPriceChange($event)" formControlName="price">{{ orderForm.value.price }}<br> Total: <input (keyup)="onTotalChange($event)" formControlName="total"> {{ orderForm.value.total }}<br> <button type="submit">Submit</button> </form> ` }) export class HelloComponent { constructor(private fb: FormBuilder) {} orderForm = this.fb.group({ amount: 200, price: 95, total: '' }); onTotalChange(e) { const total = e.currentTarget.value; this.orderForm.value.amount = total / this.orderForm.value.price; } onAmountChange(e) { const amount = e.currentTarget.value; this.orderForm.value.total = this.orderForm.value.amount * this.orderForm.value.price; } onPriceChange(e) { const price = e.currentTarget.value; this.orderForm.value.total = price * this.orderForm.value.amount; } onSubmit() { console.log(this.orderForm.value); } }

Answer 1

this.orderForm.value是只讀的。 那么你可以嘗試做這樣的事情

this.orderForm.controls['total'].setValue(price/ this.orderForm.value.amount);

stackblitz 示例已修改

Answer 2

我不確定如何分叉 stackblitz，但是如果您用以下內容替換您的課程，您將獲得正確的結果。

import { FormBuilder, FormGroup } from '@angular/forms';


export class HelloComponent implements OnInit  {
  constructor(private fb: FormBuilder) {}

  public orderForm: FormGroup;

  public ngOnInit(): void
  {
    this.orderForm = this.fb.group({
      amount: 200,
      price: 95,
      total: ''
    });
  }

  onSubmit() {
    const amount = this.orderForm.controls.amount.value;
    const price = this.orderForm.controls.price.value;

    this.orderForm.controls.total.setValue(amount * price);
  }
}

這將為您提供提交時的總數， this.orderForm值像其他輸入一樣更改，您可以按原樣重新添加函數，但現在希望使用this.orderForm 。 當對輸入字段之一進行更改時，您可以使用this.orderForm.controls.price.value或this.orderForm.controls.price.value檢查其值。 或者你可以只使用console.log(this.orderForm.value); 將所有三個值都作為一個對象。 看起來像{amount: 200, price: "97", total: 19400} 。

Answer 3

為什么使用反應性垃圾使事情變得過於復雜，只需使用模板形式即可。

 import { Component, Input } from '@angular/core'; @Component({ selector: 'hello', template: ` <form (ngSubmit)="onSubmit()"> Amount: <input (keyup)="onAmountChange($event)" name="amount" [(ngModel)]="amount">{{ orderForm.value.amount }}<br> Price: <input (keyup)="onPriceChange($event)" name="price" [(ngModel)]="price">{{ orderForm.value.price }}<br> Total: <input (keyup)="onTotalChange($event)" name="total" [(ngModel)]="total"> {{ orderForm.value.total }}<br> <button type="submit">Submit</button> </form> ` }) export class HelloComponent { constructor() {} amount = 200; price = 95; total = ''; onTotalChange(e) { const total = e.currentTarget.value; this.amount = total / this.price; } onAmountChange(e) { const amount = e.currentTarget.value; this.total = this.amount * this.price; } onPriceChange(e) { const price = e.currentTarget.value; this.total = price * this.amount; } onSubmit() { } } 

Answer 4

我注意到上面的答案提供了使用setValue的解決方案，在這個給定的場景中已經足夠了。 但是，我希望您知道您也可以使用patchValue 。

例如，如果您只想更新響應式表單上的total （而不是其他 FormControls）的值，​​您可以簡單地通過執行以下操作來實現：

this.orderForm.patchValue({
  total: price * this.amount
});

如您所見，語法更簡單、更直觀。 另一方面，如果您嘗試使用 setValue 實現這一點，則必須顯式鏈接它，或者由於setValue的限制和該方法的工作方式，您必須更新所有 FormControl。 如果你沒有提供所有的 FormControls，它會拋出一個錯誤。 這可能不是一件壞事，因為它“更安全”。

this.orderForm.setValue({
  amount: 200,
  price: 95,
  total: price * this.amount
})