TALY - The Allianz Library
  1. Interfaces
  2. DfDropdownSingleConfig

File

libs/core/dynamic-form/dropdown/src/dropdown.model.ts

Extends

DfDropdownBaseConfig

Index

Properties

Properties

multiSelect (Optional)
Type unknown
Default value false
Description

Whether multiple options can be selected at the same time. When false or omitted, only a single option can be selected (FormControl value is a single value). When true, multiple options can be selected (FormControl value is an array). false
value (Optional)
Type string | number | boolean
Description

The initially selected option value. Must match the value of one of the configured options.

Example :
autoPrefill (Optional)
Type boolean
Description

If there is only one option, pre-fill the field. Default is not to prefill.
clearOptionLabel (Optional)
Type string
Description

The label for the option to clear the currently selected value. If this label is set, the clear option will be displayed when the dropdown has a value. It's translatable by default and supports string interpolation.
filterPlaceholder (Optional)
Type string
Description

Placeholder text for the dropdown filter field.

This is what is displayed when no filter expression has been entered yet.
inputPrefix (Optional)
Type string
Description

Prefix text to place at the start of this field's input. It's translatable by default and supports string interpolation.
inputSuffix (Optional)
Type string
Description

Suffix text to place at the end of this field's input. It's translatable by default and supports string interpolation.
label
Type string
Description

This field's label. It's translatable by default and supports string interpolation.

Example :
optionalLabel (Optional)
Type string
Description

Text that is additionally displayed in the label if the field is not mandatory.

Example :
options
Type DfOptions[] | string
Description

The options property can take one of two forms:

  1. A hardcoded array of objects for direct display in a dropdown menu. Each object must have a label to display and a corresponding value.
  2. A string that represents an expression. This expression is used by an option provider service to dynamically fetch the dropdown options.
Example :
placeholder (Optional)
Type string
Description

Placeholder to be displayed in the field when the input is empty. It's translatable by default and supports string interpolation.

Example :
showFilter (Optional)
Type boolean
Description

Whether the dropdown should be filterable or not.

If set and true the dropdown values can be filtered.

If not set or false, the dropdown will not be filterable.
type
Type typeof DfDropdownTypeName
Description

Specifies the type of the field as DROPDOWN.
hint (Optional)
Type string
Description

The hint text to be displayed under the field. It's translatable by default and supports string interpolation.

Example :
note (Optional)
Type string
Description

The note text is displayed in an info message box below the field. It's translatable by default and supports string interpolation.

Example :
onBlurEvent (Optional)
Type DfInteractiveEventConfig
Description

Configure either a PFE action or service activator configuration handler for the field's blur event.
onValueChangesEvent (Optional)
Type DfInteractiveEventConfig
Description

Configure either a PFE action or service activator configuration handler for the field's valueChanges event.
validators (Optional)
Type DynamicFormValidationConfig[]
Description

Validators to set on this form field.
acl (Optional)
Type DfFieldAcl[]
Description

ACL rules to be applied to this field.
columnSpan (Optional)
Type number
Description

This field's custom size.

Number of column(s) the element should span. It's only applicable with the "CUSTOM_COLUMN" layout. The value can be 1-12, following the 12-column grid system. The default value is 12.
id
Type string
Description

This field's ID.

The ID will serve as the ACL resource name for the form field. If the field is a form element, it will also be used as a form control name within the FormGroup to which it is added. IDs must be unique within your form.

Example :
infoIcon (Optional)
Type DfInfoIconConfig
Description

Info icon with associated pop-over.
onInitEvent (Optional)
Type DfInteractiveEventConfig
Description

Configure either a PFE action or service activator configuration handler when the field's ngOnInit method is triggered.
renderName (Optional)
Type string
Description

The optional renderName is added as the attribute "data-render-name" to the df-formfield elements in the DOM. It can be used to find the rendered element of a specific field of a form.
spacing (Optional)
Type DfFormfieldSpacing
Description

This field's custom spacing.

If defined, it will be used to set the spacing between this field and the next one.
testId (Optional)
Type string
Description

The id used to select the element in the tests (unit test, e2e testing)

 
import {
  DfInteractiveBaseConfig,
  DfOptions,
  SingleInputFieldLayout
} from '@allianz/taly-core/dynamic-form';

/**
 * The value to use for the `type` attribute of dropdown
 * formfield configs.
 */
export const DfDropdownTypeName = 'DROPDOWN';

/**
 * Configuration for a dynamic dropdown field.
 */
export interface DfDropdownBaseConfig extends DfInteractiveBaseConfig, SingleInputFieldLayout {
  /**
   * Specifies the type of the field as `DROPDOWN`.
   */
  type: typeof DfDropdownTypeName;

  /**
   * This field's label.
   * It's translatable by default and supports string interpolation.
   * @examples ["My label", "My label {$['bb-pgr-simple'].person.firstName}"]
   */
  label: string;

  /**
   * Placeholder to be displayed in the field when the input is empty.
   * It's translatable by default and supports string interpolation.
   * @examples ["Placeholder", "Placeholder with dynamic value {$['bb-pgr-simple'].date}"]
   */
  placeholder?: string;

  /**
   * The `options` property can take one of two forms:
   * 1. A hardcoded array of objects for direct display in a dropdown menu. Each object must have a `label` to display and a corresponding `value`.
   * 2. A string that represents an expression. This expression is used by an option provider service to dynamically fetch the dropdown options.
   *
   * @examples [[{"label": "The first option", "value": "1"}], "$.myExpression"]
   */
  options: DfOptions[] | string;

  /**
   * Whether the dropdown should be filterable or not.
   *
   * If set and `true` the dropdown values can be filtered.
   *
   * If not set or `false`, the dropdown will not be filterable.
   */
  showFilter?: boolean;

  /**
   * Placeholder text for the dropdown filter field.
   *
   * This is what is displayed when no filter expression has been entered yet.
   */
  filterPlaceholder?: string;

  /**
   * If there is only one option, pre-fill the field. Default is not to prefill.
   */
  autoPrefill?: boolean;

  /**
   * The label for the option to clear the currently selected value.
   * If this label is set, the clear option will be displayed when the dropdown has a value.
   * It's translatable by default and supports string interpolation.
   */
  clearOptionLabel?: string;

  /**
   * Prefix text to place at the start of this field's input.
   * It's translatable by default and supports string interpolation.
   */
  inputPrefix?: string;

  /**
   * Suffix text to place at the end of this field's input.
   * It's translatable by default and supports string interpolation.
   */
  inputSuffix?: string;

  /**
   * Text that is additionally displayed in the label if the field is not mandatory.
   * @examples ["Optional"]
   */
  optionalLabel?: string;
}

export interface DfDropdownSingleConfig extends DfDropdownBaseConfig {
  /**
   * Whether multiple options can be selected at the same time.
   * When `false` or omitted, only a single option can be selected (FormControl value is a single value).
   * When `true`, multiple options can be selected (FormControl value is an array).
   * @default false
   */
  multiSelect?: false;
  /**
   * The initially selected option value.
   * Must match the `value` of one of the configured options.
   * @examples ["option-1"]
   */
  value?: string | number | boolean;
}

export interface DfDropdownMultiConfig extends DfDropdownBaseConfig {
  /**
   * Whether multiple options can be selected at the same time.
   * When `false` or omitted, only a single option can be selected (FormControl value is a single value).
   * When `true`, multiple options can be selected (FormControl value is an array).
   * @default false
   */
  multiSelect: true;
  /**
   * The initially selected option values.
   * Each entry must match the `value` of one of the configured options.
   * @examples [["option-1", "option-2"]]
   */
  value?: (string | number | boolean)[];
}

export type DfDropdownConfig = DfDropdownSingleConfig | DfDropdownMultiConfig;

results matching ""

    No results matching ""