libs/core/dynamic-form/src/base/custom.component.ts
Omit<DfInteractiveBaseConfig, 'onValueChangesEvent' | 'onBlurEvent'>
Properties |
|
| config (Optional) | |
| Type |
T
|
| name | |
| Type |
string
|
| type | |
| Type |
typeof CUSTOM_COMPONENT_TYPE
|
| 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 : |
| validators (Optional) | |
| Type |
DynamicFormValidationConfig[]
|
|
Description
|
Validators to set on this form field. |
| value (Optional) | |
| Type |
any
|
|
Description
|
The field's initial value. If set, the field will be pre-filled with / pre-set to this value. |
| 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. |
| label (Optional) | |
| Type |
string
|
|
Description
|
This field's label. It's translatable by default and supports string interpolation. Example : |
| 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 { InjectionToken } from '@angular/core';
import { DfBaseComponent } from './base.component';
import { DfComponentConfig, type DfInteractiveBaseConfig } from './base.model';
/**
* Extend this class to conveniently create a custom formfield component.
* By extending this class, you get a consistent API for inputs & outputs
* and ensure a working custom Dynamic Form component.
*/
export abstract class DfCustomComponent<T = Record<string, unknown>> extends DfBaseComponent<
DfCustomComponentConfig<T>
> {}
export const CUSTOM_COMPONENT_TYPE = 'CUSTOM_COMPONENT';
export interface DfCustomComponentConfig<T = { [key: string]: unknown }>
extends Omit<DfInteractiveBaseConfig, 'onValueChangesEvent' | 'onBlurEvent'> {
type: typeof CUSTOM_COMPONENT_TYPE;
name: string;
config?: T;
}
export const CUSTOM_DYNAMIC_FORM_COMPONENT = new InjectionToken<DfComponentConfig[]>(
'CUSTOM_DYNAMIC_FORM_COMPONENT'
);