0
\$\begingroup\$

I've written open source plugin for dynamic forms, you can check out the code here: https://www.npmjs.com/package/ng-formality

My main concern is that as formality-control.component.ts grows it will be a hit on performance.

<div [class]="getGroupClass(control)">
  <input
    *ngIf="
      [
        ValueType.Text,
        ValueType.Password,
        ValueType.Email,
        ValueType.Number,
        ValueType.Search,
        ValueType.Mobile,
        ValueType.Url
      ].includes(control.type)
    "
    [type]="control.type"
    [formControlName]="control.name"
    [id]="getId()"
    [class]="getControlClass(control)"
  />
  <ng-container *ngIf="control.type === ValueType.Article">
    <quill-editor
      [value]="control.value"
      [name]="control.name"
      [formControlName]="control.name"
      [placeholder]="control.label"
      [class]="getControlClass(control)"
    >
    </quill-editor>
  </ng-container>
  <ng-bootstrap-datetime
    *ngIf="control.type === ValueType.Date"
    [id]="getId()"
    [formControlName]="control.name"
    [seconds]="control.settings.seconds"
    [meridian]="false"
    [format]="control.settings.format"
    [class]="getControlClass(control)"
  ></ng-bootstrap-datetime>
  <textarea
    *ngIf="control.type === ValueType.Textarea"
    [id]="getId()"
    [formControlName]="control.name"
    [class]="getControlClass(control)"
  ></textarea>
  <input
    *ngIf="control.type === ValueType.Range"
    [min]="control.settings.min"
    [max]="control.settings.max"
    [type]="ValueType.Range"
    [id]="getId()"
    [formControlName]="control.name"
    [class]="getControlClass(control)"
  />

  <input
    *ngIf="[ValueType.Checkbox, ValueType.Switch].includes(control.type)"
    type="checkbox"
    [id]="getId()"
    [formControlName]="control.name"
    [class]="getControlClass(control)"
  />
  <input
    *ngIf="control.type === ValueType.Radio"
    type="radio"
    [value]="control.value"
    [name]="parent.name"
    [id]="getId()"
    [formControlName]="parent.name"
    [class]="getControlClass(control)"
  />
  <ng-container
    *ngIf="[ValueType.File, ValueType.Image].includes(control.type)"
  >
    <input
      [type]="ValueType.File"
      [class]="getControlClass(control)"
      (change)="onFileChange($event)"
      [id]="getId()"
      [accept]="control.accept"
    />
    <input
      [type]="ValueType.Text"
      [formControlName]="control.name"
      style="display: none"
    />
  </ng-container>
  <ng-container *ngIf="control.type === ValueType.Select">
    <ng-select
      [multiple]="control.settings.multiple"
      [items]="control.options"
      [name]="control.name"
      [labelForId]="getId()"
      [formControlName]="control.name"
      [class]="getControlClass(control)"
    >
    </ng-select>
  </ng-container>
  <country-select
    *ngIf="control.type === ValueType.Country"
    [control]="control"
    [parent]="parent"
    [class]="getControlClass(control)"
  ></country-select>
  <label [class]="getLabelClass(control)" [for]="getId()">{{
    control.label
  }}</label>
  <formality-validator
    *ngIf="parentForm.form.get(control.name)"
    remove-wrapper
    [control]="referenceControl"
  ></formality-validator>
</div>

Any feedback is welcome!

New contributor
Brackets is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.
\$\endgroup\$

0

Your Answer

Brackets is a new contributor. Be nice, and check out our Code of Conduct.

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.