cd-force/dynamic-form/dynamic-form.component.html

Form creation goodness.

<div class="well col-lg-8">
  <fieldset>
    <legend>Please fill in the following form. Filling in necessary fields unlocks the 'Save' button.</legend>

    <!--
      First form is for non-multicheckbox controls.
     -->
    <form [formGroup]="form">
      <div *ngFor="let control of controls" class="form-row">
        <app-form-control [control]="control" [form]="form"></app-form-control>
      </div>
    </form>

    <!-- Checkboxgroups. -->
    <form [formGroup]="group1">
      <label>{{checkboxes[0].label}}</label>
      <div *ngFor="let item of group1items.controls; let i=index">
        <input type="checkbox" [formControl]="item" />{{checkboxes[0].options[i].label}}
      </div>
    </form>

    <form [formGroup]="group2">
      <label>{{checkboxes[1].label}}</label>
      <div *ngFor="let item of group2items.controls; let i=index">
        <input type="checkbox" [formControl]="item" />{{checkboxes[1].options[i].label}}
      </div>
    </form>

    <form [formGroup]="group3">
      <label>{{checkboxes[2].label}}</label>
      <div *ngFor="let item of group3items.controls; let i=index">
        <input type="checkbox" [formControl]="item" />{{checkboxes[2].options[i].label}}
      </div>
    </form>

    <div class="form-row">
      <button class="btn btn-primary" type="submit" (click)="onSubmit()" [disabled]="!group1.valid">Save</button>
    </div>

    <div *ngIf="result" class="form-row">
      <strong>Saved the following values</strong>
      <br>
    </div>

    <pre>{{values | json}}</pre>

  </fieldset>
</div>