zzpzaf

<!-- <p>radio works!</p> -->

<div [formGroup]="fGroup" class="mat-component">
  <mat-label>{{ field.fieldLabel }}</mat-label>
  <mat-radio-group 
      [name]="field.controlName" 
      [value]="field.initialValue"
    >
    <mat-radio-button
      color="primary"

zzpzaf

<!-- <p>checkbox works!</p> -->

  <div [formGroup]="fGroup" class="mat-component">
      <mat-label>
        {{ field.fieldLabel }} 
      </mat-label>
      <mat-checkbox  color="primary"
        [formControlName]="field.controlName"
        [id]="field.controlName"
        [checked]="field.initialValue"      

zzpzaf

<mat-card-footer>
    <div [formGroup]="fGroup">
        <button mat-raised-button color="accent"
        ngDefaultControl
        [formControlName]="field.controlName"
        [id]="field.controlName"
        [type]="field.inputType"
        >
        {{ field.fieldLabel }}
        </button>

zzpzaf

<mat-form-field >
    <div [formGroup]="fGroup">
        <!-- <div class="form-field"> -->
          <!-- <label>{{ field.fieldLabel }}</label> -->
          <mat-label >
            {{ field.fieldLabel }}:
          </mat-label>
          <input matInput  
            [placeholder]="field.promptText ?? ''"

zzpzaf

<mat-card >
  <mat-card-content >
  
  <mat-toolbar color="primary">
      {{fornCardTitle}}
  </mat-toolbar>  

zzpzaf

<div [formGroup]="fGroup">
    <div class="form-field">
      <label>{{ field.fieldLabel }}</label>
      <input
        [formControlName]="field.controlName"
        [id]="field.controlName"
        [type]="field.inputType"
        [min]="field.minValue"
        [max]="field.maxValue"
        [readOnly]="field.readOnly"

zzpzaf

<div [formGroup]="fGroup">
    <div class="form-field">
      <label>{{ field.fieldLabel }}</label>
      <input
        [formControlName]="field.controlName"
        [id]="field.controlName"
        [type]="field.inputType"
        [checked]="field.initialValue === true"
        [readOnly]="field.readOnly"

zzpzaf

<div [formGroup]="fGroup">
    <div class="form-field">
        <label>{{ field.fieldLabel }}</label>
        <label *ngFor="let option of field.options">
            <input
            [name]="field.controlName"
            [type]="field.inputType"
            [value]="option.optionKey"
            [formControlName]="field.controlName"
            [checked]="option.isOptionSelected === true"

zzpzaf

<div [formGroup]="fGroup">
    <div class="form-field">
      <label>{{ field.fieldLabel }}</label>
      <input
        [formControlName]="field.controlName"
        [id]="field.controlName"
        [type]="field.inputType"
        [readOnly]="field.readOnly"
      />
    </div>

zzpzaf

<form
  class="q2container"
  [formGroup]="dynFormGroup"
  (ngSubmit)="onFormSubmit($event)"
>
  <div *ngFor="let field of formFields">

    <!-- <div [ngSwitch]="field.controlType"> -->

      <!-- <div *ngSwitchCase="'input'">