如何使用角度8中的valuechanges从反应形式输入中检测变化

Question

I want to detect the changes made in the quantity field made in the reactive form for that I am using valuechanges in order to detect the changes.

I tried valuechanges but it showing error as Cannot read property 'valueChanges' of undefined

ngOnInit() {


    this.cartItems = this.productService.getCalculateProducts();
    this.cartItems = this.productService._cartItem;

    this.initForm();
    this.cartFormChanges();


  console.log(this.cartForm.controls['items']);

  }

  initForm() {
    this.cartForm = this.fb.group({
      items: this.fb.array([])
    })

    this.cartItems.forEach(item => {
      (this.cartForm.get('items') as FormArray).push(this.createFormItem(item));
    });



  }
  createFormItem(product: Product): FormGroup {
    return this.fb.group({
      id: product.id,
      qty: [product.productQty, [Validators.max(product.productQty), Validators.min(1)]],
      price: product.productPrice
    });
  }

  get items() {
    return this.cartForm.controls.items as FormArray;
  }
  cartFormChanges() {
    this.cartForm.controls["qty"].valueChanges.subscribe((changes) => {
      console.log('Object', changes);
      console.log('qty', this.cartForm.value.qty);

    });

  }

The value should detected whenever the quantity field value is changed in the reactive form.

Answer 1

You have to get the items array from cart form. Then iterate over each item and subscribe for value change.

const control = <FormArray>this.cartForm.controls['items'];

for (i = 0; i < control.length; i++) {
      control.controls[i].get("qty").valueChanges.subscribe(x => {
        console.log(x) 
      })
}