<form [formGroup]="form" class="form-dynamic">
  <ng-template ngFor let-input [ngForOf]="formData">
    <ng-container [ngSwitch]="input.controlType">
      <ng-template [ngSwitchCase]="'text'">
        <div class="form-group">
          <mat-form-field class="example-full-width">
            <mat-label>{{input.placeholder!}} </mat-label>
            <input
              matInput
              [formControlName]="input?.controlName"
              [type]="input?.valueType"
              [name]="input?.controlName"
              [placeholder]="input?.placeholder"
              [id]="input?.controlName"
              [value]="input.currentValue ? input.currentValue  : ''"
              [required]="input?.validators?.required"
              [minlength]="input?.validators?.minlength"
              [maxlength]="input?.validators?.maxlength"
            />
          </mat-form-field>
          <div
            class="error"
            *ngIf="form.get(input?.controlName)?.invalid && (form.get(input?.controlName)?.dirty || form.get(input?.controlName)?.touched)"
          >
            <div *ngIf="form.get(input?.controlName)?.errors?.required">
              Input required
            </div>
            <div *ngIf="form.get(input?.controlName)?.errors?.minlength">
              Minimum length is {{input?.validators?.minlength}}
            </div>
          </div>
        </div>
      </ng-template>

      <ng-template [ngSwitchCase]="'number'">
        <div class="form-group">
          <mat-form-field class="example-full-width">
            <mat-label>{{input.placeholder!}} </mat-label>
            <input
              matInput
              [formControlName]="input?.controlName"
              [type]="input?.valueType"
              [name]="input?.controlName"
              [id]="input?.controlName"
              [value]="input.currentValue ? input.currentValue  : ''"
              [required]="input?.validators?.required"
              [minlength]="input?.validators?.minlength"
              [maxlength]="input?.validators?.maxlength"
            />
          </mat-form-field>
        </div>
        <div
          class="error"
          *ngIf="form.get(input?.controlName)?.invalid && (form.get(input?.controlName)?.dirty || form.get(input?.controlName)?.touched)"
        >
          <div *ngIf="form.get(input?.controlName)?.errors?.required">
            Input required
          </div>
          <div *ngIf="form.get(input?.controlName)?.value">
            xx {{form.get(input?.controlName)?.value}}
          </div>
          <div *ngIf="form.get(input?.controlName)?.errors?.minlength">
            Minimum length is {{input?.validators?.minlength}}
          </div>
        </div>
      </ng-template>

      <ng-template [ngSwitchCase]="'select'">
        <div class="form-group">
          <mat-form-field>
            <mat-label>{{input?.placeholder}}</mat-label>
            <mat-select
              [formControlName]="input?.controlName"
              [id]="input?.controlName"
              [required]="input?.validators?.required"
            >
              <mat-option
                *ngFor="let option of input?.options; let i = index"
                [value]="option?.value"
              >
                {{option.optionName}}</mat-option
              >
            </mat-select>
          </mat-form-field>
        </div>
      </ng-template>
      <ng-template [ngSwitchCase]="'multiselect'">
        <div class="form-group">
          <mat-form-field>
            <mat-label>{{input?.placeholder}}</mat-label>
            <mat-select
              [formControlName]="input?.controlName"
              [id]="input?.controlName"
              [required]="input?.validators?.required"
              multiple
            >
              <mat-option
                *ngFor="let option of input?.options; let i = index"
                [value]="option?.value"
              >
                {{option.optionName}}</mat-option
              >
            </mat-select>
          </mat-form-field>
        </div>
      </ng-template>
      <ng-template [ngSwitchCase]="'radio'">
        <div *ngFor="let option of input?.options" class="form-group row">
          <input
            [formControlName]="input?.controlName"
            [type]="input?.controlType"
            [name]="input?.controlName"
            [value]="option.value"
            [required]="input?.validators?.required"
          />
          <label [for]="input.controlName"> {{option?.optionName}}</label>
        </div>
      </ng-template>
    </ng-container>
  </ng-template>
</form>
