Not able to update the formArray fields

Question

I am using reactive forms in which, in my UI I have radioButtons which when I select , shows the details about the selected value in the form. After selecting the button, the form patches Value from the backend. My form is:

this.cForm = this.fb.group({
  name: new FormControl('', Validators.required),
  sId: new FormControl('', Validators.required),
  eId: new FormControl('', Validators.required),
  cond:  this.fb.array([this.createConditions()], Validators.required)     
});

createConditions() : FormGroup {
return this.fb.group({
  dO : new FormControl(1),
  field: new FormControl('', Validators.required),
  cType: new FormControl('', Validators.required),
  value: new FormControl('', Validators.required),
  oType : 'AND'
 });
}

addCondition() {  
  (<FormArray>this.cForm.get('cond')).push(this.createConditions());  
}

 get conditions() : FormArray {
   return this.cForm.get('cond') as FormArray
 }


deleteCondition(index :number) {
// this.conditions.removeAt(index);
const condArray = <FormArray>this.cForm.get('cond');
condArray.removeAt(index);
condArray.markAsDirty();
condArray.markAsTouched();

}

//This is called when I select the radio button.

editCat(event: any) { 

  if(event.cond.length == 1){
  this.cForm.patchValue({
    name: event['name'],
    sId : event['sId'],
    eId : event['eId'],
    cond : event['cond']
  })
  

}else {

  this.cForm.patchValue({
    name: event['name'],
    sId : event['sId'],
    eId : event['eId'],
  });
  
  this.cForm.setControl('cond', this.setExistingCond(event.cond))
}
}

 setExistingConditions(conditions: Conditions[]): FormArray {
  this.conditionCounter = 0;
  const formArray = new FormArray([]);
  conditions.forEach( cond => {
  formArray.push(this.fb.group({
    dO : 1,
    field: cond.field,
    cType: cond.cType,
    value: cond.value,
    oType : 'AND'
    }));    
  })

 return formArray;
}

So when I select a radio button which has event.cond.length == 4 it operates correctly and the UI also updates with new FormArray with those fields, but then after if I select a radio button, which has the above values less than the previous one but greater than 1, then it doesn't update the UI,

it gives this error -> There is no FormControl instance attached to form control element with path: 'conditions -> 2 -> conditionType'

conditions - refers to cond

conditionType - refers to cType

Answer 1

should be

this.cForm.setValue('cond', this.setExistingCond(event.cond).value)

See that is:setValue and you forget the value (your function this.setExistingCond return a FormArray).

You can also make that your function setExistingCond return an Array or e.g. make a setValue on a unique element of the formArray

setValueObject(index,cond)
{
 //see a you can use your "getter" this.conditions
 //I imagine you pass as argument an object with properties
 // dO,field,cType and value
 this.conditions.at(index).setValue({
    dO : cond.dO,
    field: cond.field,
    cType: cond.cType,
    value: cond.value,
    oType : 'AND'
    }
  )
}

or

setValueObject(index,cond)
{
 //see a you can use your "getter" this.conditions
 //I imagine you pass as argument an object with properties
 // dO,field,cType,value and oType
 this.conditions.at(index).setValue(cond)
}