I Am Not Able To Create A Formarray Inside Formarray Dynamically When I Call Get Api Angular 8

I am not able to create dynamically form control when I get a data. and the value in particular formControl like task and template name . Thanks in advance. { 'items': [ {

Solution 1:

What I suggest you is to iterate over your json values and then create the different controls.

On your initialisation you can create the first FormArray, then you get it and push in it all the items of your json, and finally do the same for your other FormArray which represent your tasks

ngOnInit(){
  const items = this.json.itemsthis.form = newFormGroup({
    items : newFormArray([])
  })
  let itemsForm = (<FormArray>this.form.get('items'))
  for (let i = 0; i < items.length; i++){
    itemsForm.push(this.initItem(items[i]))
  } 
}

initItem(item){
  let itemGroup = newFormGroup({
    templatename : newFormControl(item.templatename),
    tasks : newFormArray([])
  })
  let tasksItem = (<FormArray>itemGroup.get('tasks'))
  for (let i = 0; i < item.tasks.length; i++){
    tasksItem.push(newFormControl(item.tasks[i]))
  }
  return itemGroup;
}

Of course this is two times the same iteration, just the FormArray and what you put in it change so you can factorize it in a single method probably, but here is just to show you how you can do nested FormArray

Here is a working stackblitz where you can test the example

Solution 2:

The process to create a FormArray of FormArrays is equal that other. The only is take account how referred to the formArrays. So, first create two auxiliar functions

//it's a typical getter//if you manage the formArray directly it's not necesary(*)get itemsArray()
{
    returnthis.form.get("items") as FormArray
}

//see that this function is NOT a getter -has as argument an index-
getTasks(index:number)
{
    this.itemsArray.at(index).get('tasks') as FormArray
}

And, in case the outer formArray a typical function that return a formGroup

setItemsArray(data: any = null): FormGroup {
    data = data || { templatename: null, tasks: null };
    return new FormGroup({
      templatename: new FormControl(data.templatename, Validators.required),
      tasks: data.tasks
        ? new FormArray(data.tasks.map(x => new FormControl(x)))
        : new FormArray([])
    });
  }

So, we can create the formArray using

const items=newFormArray(alldata.map(x=>this.setItemsArray(x))

Now, we are ready to mannage the formArray

<form  [formGroup]="form"><divformArrayName="items"><div *ngFor="let group of itemsArray.controls;let i=index"
                      [formGroupName]="i"><!--here we has a inner formGroup---><inputformControlName="templatename"><divformArrayName="tasks"><div *ngFor="let control of getTasks(i).controls;let j=index"><input [formControlName]="j"></div></div></div></div></form>

BONUS:

To add/remove a new task in a position it's only

addTask(index:number)
{
    this.getTask(index).push(newFormControl())
}
removeTask(index:number,indexTask:number)
{
    this.getTask(index).removeAt(indexTask)
}

To add/remove a item

addItem()
{
    this.itemsArray.push(this.setItemsArray())
}
removeItem(index:number)
{
    this.itemsArray.removeAt(index)
}

(*)If you want, you can also mannage teh formArray standalone -not in a FormGroup-

if you define directly

this.formArray=newFormArray(alldata.map(x=>this.setItemsArray(x))

And change the function getTasks(index) by

getTasks(index)
{
    returnthis.formArray.at(i).get('tasks') as FormArray
}

You can use a form like

<form  [formGroup]="formArray"><div *ngFor="let group of formArray.controls;let i=index"
                  [formGroupName]="i"><!--here we has a inner formGroup---><inputformControlName="templatename"><divformArrayName="tasks"><div *ngFor="let control of getTask(i).controls;let j=index"><input [formControlName]="j"></div></div></div></form>

You can see a stackblitz