template.pug

.flex-container.align-center.flex-column
  form.form([formGroup]='serviceOptionsForm', (ngSubmit)='onSubmit()')
    .flex-container.flex-wrap
      .element
        label.field-label Options
        .flex-container
          .flex-container.multi-checkbox(*ngFor='let option of serviceOptionsForm.controls.options.controls; let i=index;', formArrayName='options')
            input(type='checkbox', [formControl]='option', formControlName='{{i}}', (change)='selectServiceOptions()')
            |             {{options[i].name}}
            div
              .flex-container(*ngIf='option.controls && option.controls.subOptions.controls.length > 0', formGroupName='{{i}}')
                .flex-container.multi-checkbox(*ngFor='let subOption of option.controls.subOptions.controls; let j=index;', formArrayName='subOptions')
                  input(type='checkbox',[formControl]='subOption', formControlName='{{j}}', (change)='selectServiceOptions()')
                  |             {{options[i].list[j].name}}
      .element
        label.field-label Selected options:
        .flex-container
          label(*ngFor='let option of selectedServiceOptions;')
            | {{option}}