另一个表单数组中的复选框数组

如何解决另一个表单数组中的复选框数组

如何在另一个表单数组中添加复选框数组？ 我有一个非常简单的表单，其中包含一个数组（optGroup），其中包含一组复选框（选项）

这是 HTML

<form [formGroup]="form">
    <h5>How many orders?</h5>

    <input
    formControlName="qtyTotal"
    class=" "
    type="number"
    id="qtyTotal"
    min="1"
    [(ngModel)]="defaultQtyTotal"
  />

    <div class="bordered" formArrayName="optGroup" *ngFor="let grp of optGroupFormArray.controls; let j = index">
        {{optGroupData[j].name}}
      
    <!-- <label
      formArrayName="options"
      *ngFor="let order of optionsFormArray.controls; let i = index"
    >
      <input type="checkBox" [formControlName]="i" />
      {{optionsData[i].name}}
    </label> -->
    
    </div>

    <label
      formArrayName="options"
      *ngFor="let order of optionsFormArray.controls; let i = index"
    >
      <input type="checkBox" [formControlName]="i" />
      {{optionsData[i].name}}
    </label>

    <div *ngIf="!form.valid">At least one order must be selected</div>
    <hr>
    <button [disabled]="!form.valid" type="submit" (click)="submit(form.value)">
    submit
  </button>
    <hr>
</form>

<pre>  {{ form.value | json }} </pre>

这里是 TS

export class AppComponent {
  form: FormGroup;
  optGroupData = [];
  optionsData = [];
  defaultQtyTotal = 1; 

get optGroupFormArray() {
        return this.form.controls.optGroup as FormArray;
      }
    
      get optionsFormArray() {
        return this.form.controls.options as FormArray;
      }
    
      constructor(private formBuilder: FormBuilder) {
        this.form = this.formBuilder.group({
          qtyTotal: "",optGroup: new FormArray([]),options: new FormArray(
            [],minSelectedCheckBoxes(1)
          )
        });
    
        // async optGroup
        of(this.getoptGroup()).subscribe(optGroup => {
          this.optGroupData = optGroup;
           this.addGroup();
        });
    
        // async options
        of(this.getoptions()).subscribe(options => {
          this.optionsData = options;
          this.addCheckBoxes();
        });
    
        // synchronous options
        // this.optionsData = this.getoptions();
        // this.addCheckBoxes();
      }
    
      private addCheckBoxes() {
        this.optionsData.forEach(() =>
          this.optionsFormArray.push(new FormControl(false))
        );
      }
      private addGroup() {
        this.optGroupData.forEach(() =>
          this.optGroupFormArray.push(new FormControl(false))
        );
      }
    
      getoptGroup() {
        return [
          { id: 100,name: "group 1" },{ id: 200,name: "group 2" },];
      }
      getoptions() {
        return [
          { id: 100,name: "options 1" },name: "options 2" },{ id: 300,name: "options 3" },{ id: 400,name: "options 4" }
        ];
      }
    
      submit(formValues) {
        const selectedOrderIds = this.form.value.options
          .map((checked,i) => (checked ? this.optionsData[i].name : null))
          .filter(v => v !== null);
    
        console.log(selectedOrderIds);
        // console.log( formValues);
      }
    }
     

完整的工作代码在这里：https://stackblitz.com/edit/save-checkboxes-array-with-inside-another-formarray

如果可能，我想实现这样的目标：