how can I subscribe to changes on a specific field on a form Array

Question

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 whole 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

Answer 1

Here is a live demo on subscribe to some fields of FormArray as well as based on some conditional value. Angular Subscribe To Formarray Valuechanges - StackBlitz

BUT, in my situation want to subscribe whole FormArray and filter for some fields valueChange to stop further subscription of FormArray.

         constructor(private fb:FormBuilder) {
          this.itemsForm = this.fb.group({
          market:  ['',  Validators.required],
          items: this.fb.array([]) ,
        });
    }

    ngOnInit(): void{
// push some items in FormArray
          this.addItem();
          this.addItem();

          this.itemsForm.get("items")?.valueChanges
                   .pipe(
                     pairwise(),
                     filter(([oldItemsArray, newItemsArray]) =>  { 

                              for(var i=0; i<oldItemsArray.length && oldItemsArray.length == newItemsArray.length; i++){
                                if (newItemsArray[i].rate != oldItemsArray[i].rate || newItemsArray[i].name != oldItemsArray[i].name )  // means name has been change, so don't subscribe
                                {
                                    console.log("Stop to further subscriber: "+i);
                                 
                                    return false;  //if both conditions are true, then stop for further subscribe
                                }
                              } 
                              return true; 
                      })
              
              ).subscribe(()=> this.onNormalFormChange() );
    }

      get itemArray() : FormArray {
        return this.itemsForm.get("items") as FormArray
      }

      newItem(): FormGroup {
         return this.fb.group({
                      name: '',
                      weight: '',
                      rate: '',
                      cost: '',
                    
         })
      }

   addItem() {
       this.itemArray.push(this.newItem());
    }
    removeItem(i:number) {
      this.itemArray.removeAt(i);
    }

  onNormalFormChange(){ 

    console.log("Subscriber Successful")
  }