dynamicform1_HTML-template-of-the-FormComponent_c11

form.component.html

<form
  class="q2container"
  [formGroup]="dynFormGroup"
  (ngSubmit)="onFormSubmit($event)"
>
  <div *ngFor="let field of formFields">
    <div [ngSwitch]="field.controlType">
      <div *ngSwitchCase="'input'">
        <ng-template [ngIf]="field.inputType === 'radio'" [ngIfElse]="other">
          <label *ngFor="let option of field.options">
            <input
              [name]="field.controlName"
              [type]="field.inputType"
              [value]="option.optionKey"
              [formControlName]="field.controlName"
              [checked]="option.isOptionSelected === true"
            />
            {{ option.optionValue }}
          </label>
        </ng-template>

        <ng-template #other>
          <div class="form-field">
            <label>{{ field.fieldLabel }}</label>
            <input
              [formControlName]="field.controlName"
              [id]="field.controlName"
              [type]="field.inputType"
              [checked]="field.initialValue === true"
              [min]="field.minValue"
              [max]="field.maxValue"
              [readOnly]="field.readOnly"
            />
          </div>
        </ng-template>
      </div>

      <div *ngSwitchCase="'select'">
        <div class="form-field">
          <label>{{ field.fieldLabel }}</label>
          <select
            [formControlName]="field.controlName"
            [id]="field.controlName"
            [multiple]="field.multipleOptions"
            [size]="field.optionsSize"
          >
            <option [ngValue]="null" disabled>{{ field["promptText"] }}</option>
            <option *ngFor="let opt of field.options" [ngValue]="opt.optionKey">
              {{ opt.optionValue }}
            </option>
          </select>
        </div>
      </div>

      <div *ngSwitchCase="'button'">
        <div class="form-field">
          <button
            ngDefaultControl
            [formControlName]="field.controlName"
            [id]="field.controlName"
            [type]="field.inputType"
          >
            {{ field.fieldLabel }}
          </button>
        </div>
      </div>
    </div>
  </div>
</form>

<hr />