Dynamically creating a form of checkboxes from nested JSON with ReactiveForms

Kravitz, first think about what do you want to change. You can planning change only selected, or all the object.

I supouse you want to change only the "check", so you need a formArray of formArrays

  hobbiesForm: FormArray
  ngOnInit() {
    this.hobbiesForm = new FormArray(this.hobbies.map(x => new FormArray([], this.customValidator())))

    //this give so formArray as hobbies you get
    this.hobbies.forEach((x, index) => {  //for each hobiee
        const array=this.hobbiesForm.at(index) as FormArray
        x.children.forEach(c=>{
          array.push(new FormControl(c.selected))
        })
      })
  }

It's a few complex manage a formArray of FormArrays, but you only need take account that when we make *ngFor="let control of formArray.controls", "control" is the element in the array. So in hobbiesForm.controls will be a FormArray and inside the formArray will be a control.

Well, better in code

<form [formGroup]="hobbiesForm" (submit)="submit(hobbiesForm)">
  <!--array is the inner FormArray--->
  <div *ngFor="let array of hobbiesForm.controls;let i=index">
    <b>{{hobbies[i].parent.title}}:</b>
    <!--control is the inner control of the array-->
    <div *ngFor="let control of array.controls;let j=index">
    <label>{{hobbies[i].children[j].title}}</label>
    <input  type="checkbox" [formControl]="control">
    </div>
  </div>
  <button>submit</button>
</form>

Well, in submit we perhafs want to change the "hobbies" object, remember that we only has in value some like [[true,false,false,true],[false],[true,false,false]]

submit(form)
  {
    if (form.valid)
    {
      form.value.forEach((x,i)=>
      {
         x.forEach((c,j)=>{
            this.hobbies[i].children[j].selected=c;
         })
      })
      console.log(this.hobbies)
    }
  }

A customValidator can be like

customValidator() {
    return (formArray: FormArray) => {
      return formArray.value.filter(x=>x).length>0?null:{error:"at leat one"}
    }
  }

If is over all the form

customValidatorOverAll(min)
  {
    return (formArray: FormArray) => {
      let count=0;

      formArray.value.forEach(x=>{
         count+=x?x.filter(c=>c).length:0;
      })
      return count>=min?null:{error:"At least select "+min}
    }
  }

you can see it in this stackblitz

Update well, this question is about ion-select. A ion-select multiple return an array with the values, so the things are very different. We are goin to obtain some like [["Jazz","Rock"]["dat aprocessing"],["camping"]]

Thats an array of array but, we need an array of FormControls only. yes a FormControl can store any thing even an array. So

  ngOnInit() {
    this.hobbiesForm = new FormArray(
      this.hobbies.map(x => new FormControl('', this.customValidator())))
  }

And our .html some like

<form [formGroup]="hobbiesForm" (submit)="submit(hobbiesForm)">
    <ion-item *ngFor="let control of hobbiesForm.controls;let i=index">
        <ion-label>{{hobbies[i].parent.title}}:</ion-label>

        <ion-select [formControl]="control" multiple="true" cancelText="cancel" okText="ok">
            <ion-option *ngFor="let hobbiee of hobbies[i].children; let i = index" 
               [value]="hobbiee.title" selected="false">{{hobbiee.title}}</ion-option>
        </ion-select>
    </ion-item>
</form>

Again we iterate over hobbiesForm.controls. But in this case, the select gives us an array.

Well, I put a customValidator. If we want that at least was select one it's only that our customValidator was like

customValidator() {
    return (formControl: FormControl) => {
      return formControl.value && formControl.value.length>0?null:{error:"At least select one"}
    }
  }

If we want a customValidator over All the form, we can use some like

customValidatorOverAll(min)
  {
    return (formArray: FormArray) => {
      let count=0;
      formArray.value.forEach(x=>{
         count+=x.length;
      })
      return count>=min?null:{error:"At least select "+min}
    }
  }

And when we create the formArray

this.hobbiesForm = new FormArray(this.hobbies.map(x => new FormControl(''))
,this.customValidatorOverAll(2))

The ion-select stackblitz

NOTE: See that we iterate over formArray.controls, not over hobbies object, and use two index i,j and hobbies object to show the "labels", but this don't belong to the formArray