<form
  [formGroup]="form"
  (ngSubmit)="onSubmit$.next(model)">
  <nz-row [nzGutter]="[0, 0]">
    <nz-col nzSpan="24">
      <formly-form
        [form]="form"
        [fields]="fields"
        [model]="model"
        [options]="options"
        (modelChange)="model = $event">
      </formly-form>
    </nz-col>
    <!-- TODO: handle all mutator states using a state machine or observable chain w/ logic:
    - initial: plus icon, "Create..." msg on button
    - submitting: loading spinner, "Creating..." msg on button
    - submit success: checkmark icon, "Created..." msg on button, 2-3 second pause then emit onCreate to parent
    - submit error: error icon, "Error Creating..." msg on button, errors displayed
    -->
    <nz-col nzSpan="24">
      <button
        nz-button
        nzType="primary"
        [disabled]="!form.valid"
        nzBlock>
        <span
          *ngIf="!(isSubmitting$ | ngrxPush)"
          nz-icon
          nzType="plus-circle"
          nzTheme="outline"></span>
        <span
          *ngIf="isSubmitting$ | ngrxPush"
          nz-icon
          nzType="loading"
          nzTheme="outline"></span>
        Create Therapy&nbsp;<i>{{ searchString$ | ngrxPush }}</i>
      </button>
    </nz-col>
  </nz-row>
</form>
