Группа форм, массив форм

Question

У меня есть массив в Angular машинопись

{
  "data": [
    {
      "name": "string",
      "description": "string",
      "chackboxes": [
        {
          "checkboxName": "string",
          "displayName": "string"
        }
      ]
    }
  ]
}

Я хочу создать массив форм внутри для группы с именем checkBox формы formcontrols. Примерно так -> FormArray [FormGroup [formControl, formcontrol], FormGroup [],] ... так что я могу l oop сначала через массив, а затем через группы. И установите флажки.

Answer 1

"разделяй и властвуй". Сделайте функции, которые получили данные и возвращают FormGroup

getChackboxesGroup(data:any):FormGroup
{
    data=data || {
                   checkboxName:'',
                   displayName": ''
                  }
    return new FormGroup({
          checkboxName:new FormControl(data.checkboxName),
          displayName:new FormControl(data.displayName),
    })
}

getDataGroup(data:any):FormGroup
{
   data=data || { name: '',
                  description: '',
                  chackboxes:null
                }
   return new FormGroup({
       name:new FormControl(data.name),
       description:new FormControl(data.description),
       chackboxes:data.chackboxes?
           new FormArray(data.chackboxes.map(x=>this.getChackboxesGroup(x)):
           new FormArray([])
   })
}

Ну, вам нужно только после получения данных

this.formArray=new FormArray(this.data.map(x=>this.getDataGroup(x))

Далее, если вы хотите добавить новый пустой элемент, который вам нужен только

this.formArray.push(this.getDataGroup(null))

//or if you want to add a new checkboxes to the first element of the array
(this.formArray.at(0).get('chackboxes') as FormArray)
       .push(this.getChackboxesGroup(null)

Answer 2

Вы хотите что-то подобное?

FormArray FormGroups с 2 FormControls и 1 FormArray FormGroups с 2 FormControls?

См. Код: https://stackblitz.com/edit/angular-form-array-form-group?file=src%2Fapp%2Fapp.component.ts

Надеюсь, это помогло