Edit Button will Populate in FormArray Angular

Question

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
   }

Please edit your question. It is not clear what you are trying to obtain and what's the actual issue — CCBet
– CCBet, Commented Aug 8, 2022 at 9:08
a few suggestions not directly related to your issue, but which are really bothering in terms of naming conventions: ItemRec ->should be renamed to something more suggestive and should follow the camelCase pattern. CreateItemRec -> should be camel case. dr is not suggestive at all, it should be a lot more descriptive. the Details parameter of the arrow function and the 'editData' function should be camel case, so "details". If you do care about having clean code, please make these updates and also edit the code here after that. 'DTO' should probably be something like "DetailsDTO" — CCBet
– CCBet, Commented Aug 8, 2022 at 9:47
@vaira we got a common but i dont have [] things in my model — Yan
– Yan, Commented Aug 8, 2022 at 10:49

vaira · Accepted Answer · 2022-08-23 04:30:29Z

0

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

this.form.get('ItemRec').patchValue([this.iData]) // basically pass an array in patchValue

example of correct input

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

edited Aug 23, 2022 at 4:30

answered Aug 8, 2022 at 11:34

vaira

2,2801 gold badge13 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Edit Button will Populate in FormArray Angular

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related