Display Decorators

These decorators help formatting forms automatically. Those forms are aware of the decorators by using the <ac-editor> component for a single field or the <ac-autoform> component for a complete view model.

These are the available decorators:

  • Hidden: Element will not be rendered as column in ac-datagrid
  • Display: Change columns header or label name and add a tooltip optionally
    • name: The label
    • description: The tooltip
  • DisplayFormat: Invoke a formatter or pipe
  • TemplateHint: use a template to render the editor; some templates are build in (for string: text, textarea, for number: integer, float, for Date: date, time, datetime, calendar)
  • Readonly: The field is readonly in the form
  • EnumType: Use an enum to force a select box and provide an option list, even if the property’s type is number or string
  • FilterUiHint: A helper for the <ac-datagrid> component to associate a filter field with a particular column

Hidden

Element will not be rendered as column in <ac-datagrid> and <ac-autoform>. When forced to render in <ac-editor> it will create a hidden field (type=”hidden”).

Usage:

@Hidden()
id: number = 0;

Display

Change columns header or label name and add a tooltip optionally. Parameters:

  • name: The label
  • description (optional): The tooltip
  • order (optional): Order in which fields appear in <ac-autoform>
  • group (optional): Collect fields into groups and render as <fieldset>

The groups appear in the order of their elements. To determine a group order the sum of all fields is calculated.

DisplayGroup

Groups fields in autoforms using <fieldset> and <legend>.

TemplateHint

Uses a template to render the editor. Some templates are build in:

  • for string: text, textarea
  • for number: integer, float
  • for Date: date, time, datetime, calendar

Readonly

The field is readonly in the form. It just renders grayed out and handles the internals using default HTML5 techniques.

EnumType

Use an enum to force a select box and provide an option list, even if the property’s type is number or string

FilterUiHint

A helper for the <ac-datagrid> component to associate a filter field with a particular column