Javascript 角度反馈形成双向数据绑定

我试图建立一个角度反应形式，其中输入字段值根据其他字段中的输入进行更新。三个输入字段

amount

、

price

和

total

应反映变化，以便

amount*price=total

保持不变。完整代码

导入{
组成部分，
输入
}从“@angular/core”开始；
进口{
造模工
}从“@angular/forms”开始；
@组成部分({
选择器：“你好”，
模板：`
金额：{{orderForm.value.Amount}}

价格：{{orderForm.value.Price}}

总计：{{orderForm.value.Total}}

提交
`
})
导出类HelloComponent{
构造函数（私有fb:FormBuilder）{}
orderForm=this.fb.group({
金额：200，
价格:95,，
总计：“”
});
本体改变（e）{
const total=e.currentTarget.value；
this.orderForm.value.amount=总计/this.orderForm.value.price；
}
更改日期（e）{
常数金额=e.currentTarget.value；
this.orderForm.value.total=this.orderForm.value.amount*this.orderForm.value.price；
}
价格变动（e）{
常数价格=e.currentTarget.value；
this.orderForm.value.total=价格*this.orderForm.value.amount；
}
onSubmit（）{
log（this.orderForm.value）；
}
}

此.orderForm.value

为只读。然后你可以试试这样做

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

---

我不确定如何使用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.controls.price.value

或

this.orderForm.controls.price.value

检查其值。或者您可以只

console.log（this.orderForm.value）

将所有三个值作为对象获取。这看起来像

{amount:200，price:97，total:19400}

我注意到上面的答案提供了使用的解决方案，在这个给定的场景中，这已经足够了。不过，我想让你知道，你也可以利用

例如，如果您只想更新被动表单上的

total

（而不是其他表单控件）的值，只需执行以下操作即可：

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

正如您所看到的，语法更简单、更直观。另一方面，如果您试图用setValue实现这一点，则必须显式地链接它，或者 由于

setValue

的限制以及该方法的工作方式，您必须更新所有FormControls。如果不提供所有FormControls，它将抛出一个错误。这可能不是一件坏事，因为它“更安全”

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

---

this.orderForm.value是只读的，这就是为什么不能覆盖所有

（keyup）

s，只需订阅

this.orderForm.valueChanges

。最好至少阅读文档的第一页，这是事实陈述，而不是问题。