argos/dmp-frontend/src/app/form/dynamic-fields/dynamic-form-field.component.html

<div *ngIf="form && field" [id]="field.id" [formGroup]="form" [ngSwitch]="field.viewStyle.renderStyle">

  <!-- <h5 *ngIf="field.title">{{field.title}}</h5> -->


  <div [class.content-left-margin]="field.title">
    <h5 *ngIf="field.description">{{field.description}}</h5>
    <h5 *ngIf="field.extendedDescription" class="field-extended-desc">
      <i>{{field.extendedDescription}}</i>
    </h5>

    <div *ngSwitchCase="'freetext'">
      <mat-form-field>
        <input matInput formControlName="value" placeholder="{{field.data.label}}" [required]="field.validationRequired">
        <mat-error *ngIf="form.get('value')['errors'] && form.get('value')['errors']['required']">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
      </mat-form-field>
    </div>

    <div *ngSwitchCase="'combobox'">
      <!--TODO-->
      <div *ngIf="this.field.data.type === 'autocomplete'">
        <df-autocomplete [form]="form" [field]="field"></df-autocomplete>
      </div>
      <div *ngIf="this.field.data.type === 'wordlist'">
        <df-dropdown [form]="form" [field]="field"></df-dropdown>
      </div>

    </div>

    <div *ngSwitchCase="'checkBox'" class="checkbox">
      <df-checkbox [form]="form" [field]="field"></df-checkbox>
    </div>

    <div *ngSwitchCase="'textarea'">
      <mat-form-field>
        <textarea matInput formControlName="value" matTextareaAutosize matAutosizeMinRows="2" matAutosizeMaxRows="10" [required]="field.validationRequired">
        </textarea>
        <button mat-button *ngIf="form.get('value').value" matSuffix mat-icon-button aria-label="Clear" (click)="this.form.patchValue({'value': ''})">
          <mat-icon>close</mat-icon>
        </button>
        <mat-error *ngIf="form.get('value')['errors'] && form.get('value')['errors']['required']">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
      </mat-form-field>

    </div>

    <div *ngSwitchCase="'booleanDecision'">
      <df-booleanDecision [form]="form" [field]="field"></df-booleanDecision>
    </div>

    <div *ngSwitchCase="'radiobox'">
      <df-radiobox [form]="form" [field]="field"></df-radiobox>
    </div>

    <div *ngSwitchCase="'label'"> </div>


    <!--<div [hidden]="isValid">
      <mat-error *ngIf="isValidRequired">The field "{{field.data.label}}" <strong>required</strong></mat-error>
       <div class="invalid-feedbackCustom" *ngIf="isValidRequired">The field "{{field.label}}" is required</div>
      <div class="invalid-feedbackCustom" *ngIf="isValidPattern">The field {{field.label}} must match a regular expression {{field.regex}}</div>
      <div class="invalid-feedbackCustom" *ngIf="isValidCustom">The field {{field.label}} custom Validation</div>
    </div>-->

  </div>
</div>

<!-- <div [formGroup]="form" class="form-group">


  <label [attr.for]="field.key">{{field.label}}</label>

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


    <input *ngSwitchCase="'textbox'" class ="form-control" [formControlName]="field.key"
            [id]="field.key" [type]="field.type" required ="field.required">


    <select [id]="field.key" *ngSwitchCase="'dropdown'" class ="form-control" [formControlName]="field.key">
      <option *ngFor="let opt of field.options" [value]="opt.key">{{opt.value}}</option>
    </select>


    <input *ngSwitchCase="'checkbox'" [formControlName]="field.key" [(ngModel)]="field.value"
      [id]="field.key" [type]="field.type" (change)="field.value = ckb.checked" #ckb>


  </div>

  <div class="alert alert-danger" *ngIf="!isValid">{{field.label}} is required</div>


</div> -->


<!--input or change event
      on change event the listener is triggered on blur -->

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

        <autocomplete-remote *ngIf="field.url" formControlName="value" [url]="field.url" ></autocomplete-remote>

        <select *ngIf="!field.url"  class="form-control" [id]="field.key" formControlName="field.key"  [required]="field.required" (change)="toggleVisibility($event, field, false)">
          <option *ngFor="let opt of field.options" [value]="opt._value"  >{{opt._label}}</option>
        </select>
      </div> -->




<!--     <div *ngSwitchCase="'checkbox'" class="checkbox">
        <label class="checkBoxLabelCustom">
            <input *ngSwitchCase="'checkbox'" class="form-check" formControlName="value" [type]="field.type"
            (change)="toggleVisibility($event, field, true)"  [required]="field.required" [checked]="form.get(field.key).value">{{field.label}}
        </label>
      </div> -->

<!-- <div [formGroup]="form" class="form-group" [ngSwitch]="field.controlType">
    <div *ngIf= "field.rules; else  elseBlock ">
      <div *ngIf="field.rules.length > 0; else elseBlock">
        <div *ngFor="let rule of field.rules">
          <div *ngIf="rule._type == 'fieldVisible'; else otherRuleBlock">
            <div hidden="{{ruleVisibleMethod(field, rule, dataModel)}}">
              <label [attr.for]="field.key">{{field.label}}</label>

              <input *ngSwitchCase="'textbox'" class="form-control" [formControlName]="field.key" [id]="field.key" [type]="field.type"
                required="field.required">

              <select [id]="field.key" *ngSwitchCase="'dropdown'" class="form-control" [formControlName]="field.key">
                            <option *ngFor="let opt of field.options" [value]="opt.key">{{opt.value}}</option>
                          </select>

              <input *ngSwitchCase="'checkbox'" [formControlName]="field.key" [(ngModel)]="field.value" [id]="field.key" [type]="field.type"
                (change)="field.value = ckb.checked" #ckb>
            </div>
          </div>
        </div>
      </div>
    </div>

    <ng-template #elseBlock>
      <label [attr.for]="field.key">{{field.label}}</label>
      <input *ngSwitchCase="'textbox'" class="form-control" [formControlName]="field.key" [id]="field.key" [type]="field.type"
        required="field.required">

      <select [id]="field.key" *ngSwitchCase="'dropdown'" class="form-control" [formControlName]="field.key">
                  <option *ngFor="let opt of field.options" [value]="opt.key">{{opt.value}}</option>
                </select>

      <input *ngSwitchCase="'checkbox'" [formControlName]="field.key" [(ngModel)]="field.value" [id]="field.key" [type]="field.type"
        (change)="field.value = ckb.checked" #ckb>

    </ng-template>

    <ng-template #otherRuleBlock>

      </ng-template>

  </div> -->