Edit FormArray Angular

Issue

How do you use Set Control in a Form Array and populate it to the form? I can call the Product and populate it, but the ProductDetails I can't populate it in Form Array.

here's my DTO which i call it in the Patch Value

  /* Defines the product entity */
    export interface Product {
      id: number;
      productName: string;
      productCode: string;
      starRating: number;
      
    }
    
    export interface ProductDetails{
      propertyNumber:number;
      itemDescription:string;
      ProductGroup: Product;
    }

productDetails: ProductDetails;
    private sub: Subscription;
    
    
     constructor(private fb: FormBuilder,
                  private route: ActivatedRoute,
                  private router: Router,
                  private productService: ProductService) 
    
    
    ngOnInit(): void {
        this.productForm = this.fb.group({
          productName: ['', [Validators.required,
                             Validators.minLength(3),
                             Validators.maxLength(50)]],
          productCode: ['', Validators.required],
          starRating: ['', NumberValidators.range(1, 5)],
          tags: this.fb.array([this.CreateItem()])
        });
    
        this.sub = this.route.paramMap.subscribe(
          params => {
            const id = +params.get('id');
            this.getProduct(id);
          }
        );
       this.CreateItem()
      }


    CreateItemRec():FormGroup {
            return this.fb.group({  
              propertyNumber:['',Validators.required],
              itemDescription:['',Validators.required],
            })
        
        }

displayProduct(Details: ProductDetails): void {
    if (this.productForm) {
      this.productForm.reset();
    }
    this.productDetails = Details;

    // Update the data on the form
    this.productForm.patchValue({
      productName: this.product.productGroup.productName,
      productCode: this.product.productGroup.productCode,
      starRating: this.product.productGroup.starRating,
      description: this.product.productGroup.description
    });
    this.productForm.setControl('tags', this.fb.array(this.product));
  }

Solution

SetControl "reemplace" one FormControl/FormGroup/FormArray by another one. If you want to give value to a FormArray you can use setValue or patchValue but... be carefully, You need before add so many elements to your FormArray as element you want before use pathValue.

But before, I imagine your interface was

export interface Product {
  id: number;
  productName: string;
  productCode: string;
  starRating: number;
  ItemRec:ProductDetails[]; //<--an array
}

So, I imagine you want to do some like:

//Allway you use a FormArray you need a "getter" to use in the .html
get formArrayTags()
{
   return this.productForm.get('tags') as FormArray
}


//make a loop over the "product.ItemRed"
this.product.ItemRec.forEach((x,i)=>{
   if (this.formArrayTags.length<i+1) //if ther're not enough space
       this.formArrayTags.push(this.CreateItemRec())

   this.formArrayTags.at(i).setValue(x);  //<--use setValue or patchValue
})

//we need remove the elelment of the formArray
while(this.formArrayTags.length>this.product.ItemRec.length)
   this.formArrayTags.removeAt(this.formArrayTags.length-1)

BTW, you can use patchValue you can pass directtly the object. All the properties that was in the FormGroup and in the object are

 this.productForm.pacthValue(this.product)

NOTE: If you only has one ItemRec for each product you should use a FormGroup, not a FormArray

Update another aproach is change the function CreateItemRec and create a new function createGroup

CreateItemRec(data:any=null):FormGroup {
   data=Data || {propertyNumber:'',itemDescription:''}
   return this.fb.group({  
         propertyNumber:[data.propertyNumber,Validators.required],
         itemDescription:[data.itemDescription,Validators.required],
   })
}

CreateGroup(data:any=null)
{
  data=data|| {productName:'',productCode:'',starRating:0,tags:null}

   return his.fb.group({
      productName: [data.productName, [Validators.required,
                         Validators.minLength(3),
                         Validators.maxLength(50)]],
      productCode: [data.productCode, Validators.required],
      starRating: [data.starRating, NumberValidators.range(1, 5)],
      tags: data.tags?this.fb.array(data.tags.map(x=>this.CreateItem(x)):
            this.fb.array([this.createItem()])
    });

So, you can create the form like

 this.productForm =this.createGroup() //<--you create a FormGroup empty

 this.productForm =this.createGroup(this.product) //<--you create a FormGroup 
                                                  //with the data of this.product

Answered By - Eliseo