libs/core/dynamic-form/checkbox/src/checkbox.model.ts
Configuration for a single checkbox component
Properties |
|
| type | |
| Type |
typeof DfCheckboxTypeName
|
|
Description
|
Specifies the type of the field as |
| value (Optional) | |
| Type |
boolean
|
|
Description
|
The field's initial value. |
| label | |
| Type |
string
|
|
Description
|
This field's label. It's translatable by default and supports string interpolation. Example : |
| labelSizeSmall (Optional) | |
| Type |
boolean
|
| Default value |
false
|
|
Description
|
Sets the checkbox label size to |
| 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 |
| onValueChangesEvent (Optional) | |
| Type |
DfInteractiveEventConfig
|
|
Description
|
Configure either a PFE action or service activator configuration handler for the field's |
| 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 |
| 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,
HorizontalLayout,
VerticalLayout
} from '@allianz/taly-core/dynamic-form';
/**
* The value to use for the `type` attribute of checkbox formfield configs.
*/
export const DfCheckboxTypeName = 'CHECKBOX';
/**
* The value to use for the `type` attribute of checkbox group formfield configs.
*/
export const DfCheckboxGroupTypeName = 'CHECKBOX_GROUP';
/**
* Base configuration interface for both single checkbox and checkbox group components
*/
export interface DfCheckboxBaseConfig extends DfInteractiveBaseConfig {
/**
* 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 checkbox label size to `'small'`. The default size is `'large'`.
* @default false
*/
labelSizeSmall?: boolean;
}
/**
* Configuration for a single checkbox component
*/
export interface DfCheckboxConfig extends DfCheckboxBaseConfig {
/**
* Specifies the type of the field as `CHECKBOX`.
*/
type: typeof DfCheckboxTypeName;
/**
* The field's initial value. `true` if checked, `false` if unchecked.
*/
value?: boolean;
}
/**
* Configuration for a checkbox group component
*/
export interface DfCheckboxGroupConfig extends Omit<DfCheckboxBaseConfig, 'columnSpan'> {
/**
* Specifies the type of the field as `CHECKBOX_GROUP`.
*/
type: typeof DfCheckboxGroupTypeName;
/**
* The options for the checkbox group. Can be either:
* 1. A hardcoded array of objects for direct display. Each object must have a `'label'` and `'value'`.
* 2. A string expression used by an option provider service to dynamically fetch options.
*
* @examples [[{"label": "The first option", "value": "1"}], "$.myExpression"]
*/
options: DfOptions[] | string;
/**
* The layout configuration for the checkbox group.
* @default { optionsColumnSpan: 4, horizontal: false }
*/
layout?: VerticalLayout | HorizontalLayout;
/**
* The initially selected option values.
* Each entry must match the stringified `value` of one of the configured options.
* @examples [["option-1", "option-2"]]
*/
value?: string[];
}
export const CheckboxLabelSize = {
Small: 'small',
Large: 'large'
} as const;
export type CheckboxLabelSize = (typeof CheckboxLabelSize)[keyof typeof CheckboxLabelSize];