Edit Button will Populate in FormArray Angular-CodePudding

I'm trying to get the list which contain {dr: "DR2022000046" ,invoice: "SI09887"} and populate it to the formarray. the problem is it did't populate it to my formArray Once i use the this.form.get('ItemRec').patchValue(this.IData)?

// Here is the form that i created.

this.form= this.fb.group({
      transactionNumber:['',Validators.required],
      transactionStatus:['', Validators.required],
      ItemRec: this.fb.array([this.CreateItemRec()])
    })
   
CreateItemRec():FormGroup {
        return this.fb.group({  
          dr: ['', Validators.required],
          invoice:['', Validators.required],
        })
    
    }

get ItemRec(): FormArray {
      return <FormArray>this.receivedPropertyForm.get('ItemRec') as FormArray;
    }

//here what i do once i click the button and populate it.

this.sub = this.router.paramMap.subscribe(
        params => {
      const id =  params.get('Id');
        this.getListId(id);
        console.log(params)
      });
      
 getListId(id: number):void{
    this.micro.getAllList(id)
    .subscribe({
      next: (Details:DTO) => this.editData(Details),

      error: err => this.errorMessage = err
    })
   }
   editData(Details:DTO): void{
    
    this.iData = Details;
    console.log(Details);
    
    this.form.patchValue({
      transactionNumber:this.iData.propertyTransactionGroup.transactionNumber,
      transactionStatus:this.iData.propertyTransactionGroup.transactionStatus
    });
   this.form.get('ItemRec').patchValue(this.iData)// this won't work got error value.forEach is not a function at FormArray.patchValue
   }

CodePudding user response：

this.iData should be an array but it seems to be an object, that is why the error says it could not use foreach on this.iData

this.form.get('ItemRec').patchValue([this.iData]) // should be array on in array

example of correct input

 this.form.get('ItemRec')
.patchValue([ {dr: 'A', invoice: ''} , {dr: 'A', invoice: ''}])