Angular2：订阅表单生成器中的值更改

Question

我正在使用 ionic2 和 angular2，我有一个用 formbuilder 构建的表单，但我想检测某个输入的新变化。

ionViewDidLoad() {
  this.purchaseDataForm = this.formBuilder.group({
    kms: ['', Validators.required],
    lts: ['', Validators.required],
    price: ['', Validators.required],
    total: ['', Validators.required]
  });
}

这就是验证我的表单的方式，但我想订阅 price 和 lts 输入的值变化，你知道吗怎么做？

我正在尝试使用以下函数，但它显示 Cannot read property 'valueChanges' of undefined

 ngOnInit() {
  this.purchaseDataForm.price.valueChanges.subscribe(value => {
    console.log(value);
  });
}

谢谢！

Answer 1

我不知道 Ionic，但我猜 ionViewDidLoad() 是在 ngOnInit() 之后调用的。只需将代码从 ionViewDidLoad() 移动到构造函数或当前代码之前的 ngOnInit()。

您应该可以使用

获得价格控制

this.purchaseDataForm.get('price').valueChanges.subscribe(va‌lue => {

Answer 2

价格不是您表单的直接属性。价格位于表单的 "controls"-对象中。所以你的代码应该是这样的：

ngOnInit() {
    this.purchaseDataForm.controls.price.valueChanges.subscribe(value => {
        console.log(value);
    });
}

Angular2：订阅表单生成器中的值更改

Angular2: Subscribe valuechanges in formbuilder

formbuilder

angular2-forms

angular