My app consists of a form array that has different automatically calculated fields based on other fields, so I need to subscribe to the value changes for some fields, but it's the first time I work with form Array. This is the code that I used to make the Array Form

constructor(public FormBuilder: FormBuilder  ) {
    this.testForm=  new FormGroup({
      formArrayName: this.FormBuilder.array([])
    });
    this.buildForm();
  }

buildForm() {
    const controlArray = this.testForm.get('formArrayName') as FormArray;

    Object.keys(this.options).forEach((i) => {
      controlArray.push(
        this.FormBuilder.group({
            id_agent : [this.options[i].ID , Validators.required] ,
            calls :  [0] ,
            CA : { value: 0, disabled: true } ,
            RPC : { value: 0, disabled: true } ,
            CR : { value: 0, disabled: true } ,
            ACU : { value: 0, disabled: true } ,
            CB : [0] ,
            RP : [0] ,
            NGT : { value: 0, disabled: true } ,
            sells : { value: 0, disabled: true } ,
            week : ['' , Validators.required] ,
          }
        )
      );
    });  
  }

I managed to subscribe to value changes of the hole controls like this

controlArray.controls.forEach((control ,index)=> {
      control.valueChanges.subscribe(value => {
       console.log(value)
    });
    });

This works, but I need to subscribe to specific field, I tried to work with that, but it got into infinite loop I can understand why it was wrong. so I need something like :

controlArray.controls.forEach((control ,index)=> {
          control['calls'].valueChanges.subscribe(value => {
           console.log(value)
        });
        });

I tried this by the way and I got Cannot read properties of undefined (reading 'valueChanges') error