RackHD/on-web-ui

<div class="row" [formGroup]="filterForm">
  <div *ngFor="let field of fields; let i=index;" [class]="classList[i]"
    [ngClass]="{'form-input': needReset, 'form-group': isDefaultForm}"
    [ngStyle]="{'margin-top': marginTop}">
    <label *ngIf="labels && labels[i] && labelBold" [for]="'input' + i"
      [ngClass]="{'required': fieldsRequired[i]}"><b>{{labels[i]}}</b></label>
    <label *ngIf="labels && labels[i] && !labelBold" [for]="'input' + i"
      [ngClass]="{'required': fieldsRequired[i]}">{{labels[i]}}</label>
    <datalist [id]="field + fields.length">
      <select name="item_select">
        <option [ngValue]="item" *ngFor="let item of (dropdownLists && dropdownLists[field])">
          {{item}}
        </option>
      </select>
    </datalist>
    <clr-icon *ngIf="needSearchIcon" shape="search"></clr-icon>
    <input #idSearcher [id]="'input' + i" type="text"
      [ngClass]="{'form-control': true, 'input-width': !(widths && widths[i])}"
      [formControlName]="field"
      [attr.list]="field + fields.length"
      [size]="widths && widths[i] || 32"
      [placeholder]="placeholders && placeholders[i] || ''"
      (keyup)="onSearch(idSearcher.value, field)"
      (change)="onChanged()" autocomplete="off">
    <clr-icon shape="times" *ngIf="idSearcher.value" (click)="onClear(field)" title="Clear input"></clr-icon>
  </div>
  <div *ngIf="needReset" [class]="resetClass">
    <div class="button-align">
      <button type="button" class="btn btn-icon" (click)="onReset()" title="Reset all">
        <clr-icon shape="times"></clr-icon>
      </button>
    </div>
  </div>
</div>