Dynamic forms¶

Code¶

Usage¶

import { SiFormlyModule } from '@siemens/element-ng/formly';

@NgModule({
  imports: [SiFormlyModule, ...]
})

Standalone support¶

Formly does not provide standalone support yet see also.

However, starting from Element v46.5.0 you can use the workaround provided in comment.

Include SiFormlyModule in your app configuration to register your custom types/validators/wrappers.

import { ApplicationConfig, importProvidersFrom } from '@angular/core';
import { SiFormlyModule } from '@siemens/element-ng/formly';

const config: ApplicationConfig = {
  providers: [
    importProvidersFrom(
      SiFormlyModule.forRoot({
        // optionally you can add following configurations
        types: [
          // register your custom types here
        ],
        validators: [
          // register your custom validators here
        ],
        wrappers: [
          // register your custom wrapper here
        ]
      })
    )
  ]
}

SiFormlyComponent¶

The SiFormlyComponent is a wrapper around formly to generate dynamic forms. Please note that if you don't use this wrapper your form items will not be themed correctly based on Element theme and you might have to manually manage theming which is not recommended.

Utilities¶

There are plenty of utilities custom-made for you to develop apps with dynamic forms using SiFormly.

Custom Types¶

In addition to prebuilt types from bootstrap, Element also provides you with a set of custom types that help you to easily make use of Element components in formly. The below types helps you to develop your dynamic forms app more easily.

Structural types¶

These types can be used to achieve a specific layout or wrapper for your form elements.

• object-grid
  • Wraps your fields in a configurable bootstrap grid.
  • Use gridConfig property with props in field config to configure your grid.
• array
  • Wraps your form array together with add/remove buttons if needed.
  • Expects a field array type to be provided within the fields input.
• accordion
  • Wraps your input fields in an accordion
• tabset
  • Wraps your input fields in a tabset

Field types¶

In addition to the formly bootstrap types, the following custom types can be used to enable use of Element form components with formly.

• checkbox

• button

  Use btnType property with props in field config to configure following supported button types:

  • primary
  • secondary
  • tertiary
  • danger
  • warning

• boolean

• date

  The following inputs can be passed as field config props:

  • autoClose
  • dateConfig

• date-range

  The following inputs can be passed as field config props:

  • ariaLabelCalendarButton
  • autoClose
  • debounceTime
  • endDatePlaceholder
  • endTimeLabel
  • siDatepickerConfig
  • startDatePlaceholder
  • startTimeLabel

• datetime

  The following inputs can be passed as field config props:

  • autoClose
  • dateConfig

• email

• enum
• integer

• number

  The following inputs can be passed as field config props:

  • numberStep
  • showButtons
  • unit

• password

  The following inputs can be passed as field config props:

  • digits
  • lowerCase
  • minLength
  • special
  • upperCase

• si-select

  • use multi property with props in field config to enable multi selection mode.

• string

• textdisplay

  • use prefix property with props in field config to add prefix before text.
  • use suffix property with props in field config to add suffix after text.

• textarea

• time

  The following inputs can be passed as field config props:

  • hideLabels
  • showMeridian
  • showMilliseconds
  • showMinutes
  • showSeconds

Custom wrappers¶

Use following wrappers to wrap your form fields with specific Element components.

• form-field
  • uses SiFormItemComponent to wrap your form fields
• form-fieldset
  • uses SiFormFieldsetComponent
• form-field-horizontal
  • wraps your form field and label in a horizontal layout.
• icon-wrapper
  • wraps your form field with an icon displayed at the end.
  • The following inputs can be passed as field config props:
    • icon
      • the icon to be displayed at the end of the form field.
    • iconSize
      • the size of the icon to be displayed in pixels.
    • iconTooltip
      • Tooltip for the icon to be displayed.

Grid layout¶

SiFormly also supports rendering form with multi column grid layout.

Tabs¶

SiFormly also supports rendering form in multiple tabs. It uses SiTabsetComponent internally for displaying tabs.

Accordion¶

SiFormly also supports rendering forms in accordions. It makes use of SiAccordionComponent internally.

i18n support¶

SiFormly internally uses a custom extension translate to internationalize your forms.
It is configured similar to this doc on formly but without the hard dependency to ngx-translate library.