TALY - The Allianz Library
  1. Interfaces
  2. DfNumberStepperConfig

File

libs/core/dynamic-form/number-stepper/src/number-stepper.model.ts

Description

Configuration for a dynamic number stepper field.

Extends

Omit<DfInteractiveBaseConfig, 'hint' | 'columnSpan'>

Index

Properties

Properties

decrementAriaLabel (Optional)
Type string
Description

Sets the aria-label for the decrement button.
incrementAriaLabel (Optional)
Type string
Description

Sets the aria-label for the increment button.
inputAriaLabel (Optional)
Type string
Description

Sets the aria-label for the input of the number stepper.
invalidFormatErrorMessage (Optional)
Type string
Description

Custom error message to display when the value has an invalid format.
label
Type string
Description

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

Example :
max (Optional)
Type number
Description

Sets the maximum accepted number in the stepper. Default: 100
min (Optional)
Type number
Description

Sets the minimum accepted number in the stepper. Default: 0
prefix (Optional)
Type string
Description

Optional prefix displayed in the input area
size (Optional)
Type "big" | "normal"
Description

Defines the size of the number stepper ('big' or 'normal'). In retail, the default value is 'big' and in expert the default value is 'normal'
step (Optional)
Type number
Description

Sets the step size. Controls the increment/decrement applied when clicking the stepper buttons, and restricts validation to values that match the step. Default: 1
suffix (Optional)
Type string
Description

Optional suffix displayed in the input area
type
Type typeof DfNumberStepperTypeName
Description

Specifies the type of the field as NUMBER_STEPPER.
value (Optional)
Type number
Description

The field's initial value.
valueOutsideRangeErrorMessage (Optional)
Type string
Description

Custom error message to display when the value is not within the allowed range.
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 } from '@allianz/taly-core/dynamic-form';

/**
 * The value to use for the `type` attribute of the number stepper
 * formfield configs.
 */
export const DfNumberStepperTypeName = 'NUMBER_STEPPER';

/**
 * Configuration for a dynamic number stepper field.
 */
export interface DfNumberStepperConfig
  extends Omit<DfInteractiveBaseConfig, 'hint' | 'columnSpan'> {
  /**
   * Specifies the type of the field as `NUMBER_STEPPER`.
   */
  type: typeof DfNumberStepperTypeName;

  /**
   * 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;

  /**
   * Sets the maximum accepted number in the stepper. Default: `100`
   */
  max?: number;

  /**
   * Sets the minimum accepted number in the stepper. Default: `0`
   */
  min?: number;

  /**
   * Sets the step size. Controls the increment/decrement applied when clicking
   * the stepper buttons, and restricts validation to values that match the step.
   * Default: `1`
   */
  step?: number;

  /**
   * Custom error message to display when the value is not within the allowed range.
   */
  valueOutsideRangeErrorMessage?: string;

  /**
   * Custom error message to display when the value has an invalid format.
   */
  invalidFormatErrorMessage?: string;

  /**
   * Optional suffix displayed in the input area
   */
  suffix?: string;

  /**
   * Optional prefix displayed in the input area
   */
  prefix?: string;

  /**
   * The field's initial value.
   */
  value?: number;

  /**
   * Sets the aria-label for the input of the number stepper.
   */
  inputAriaLabel?: string;

  /**
   * Sets the aria-label for the increment button.
   */
  incrementAriaLabel?: string;

  /**
   * Sets the aria-label for the decrement button.
   */
  decrementAriaLabel?: string;

  /**
   * Defines the size of the number stepper (`'big'` or `'normal'`).
   * In retail, the default value is `'big'` and in expert the default value is `'normal'`
   */
  size?: 'big' | 'normal';
}

results matching ""

    No results matching ""