# new NgxFormFieldDirective()
Provides the foundation for all form field components in Decaf applications by implementing Angular's ControlValueAccessor interface and FieldProperties for validation. This directive manages form control integration, validation state, multi-entry forms (FormArrays), and CRUD operation context. It handles form group lifecycle, error messaging, change detection, and parent-child form relationships. Extend this class to create custom form field components that seamlessly integrate with Angular's reactive forms and Decaf's validation system.
Abstract base directive for CRUD form fields in Angular applications.
- Implements:
- ControlValueAccessor
- FieldProperties
Example
```typescriptExtends
Members
HTML5InputTypes
# protected readonly HTML5InputTypes
Exposes the HTML5InputTypes enum to the component template, enabling conditional rendering and behavior based on input field types. This protected readonly property ensures that template logic can access input type constants while maintaining encapsulation and preventing accidental modification.
Reference to HTML5 input type constants for template usage.
HTML5InputTypes
# protected readonly HTML5InputTypes
Exposes the HTML5InputTypes enum to the component template, enabling conditional rendering and behavior based on input field types. This protected readonly property ensures that template logic can access input type constants while maintaining encapsulation and preventing accidental modification.
Reference to HTML5 input type constants for template usage.
# activeFormGroup
Returns the appropriate FormGroup based on whether this field supports multiple values. For single-value fields, returns the main form group. For multi-value fields, returns the form group at the active index from the parent FormArray. If no formGroup is set, returns the parent of the formControl.
Gets the currently active form group based on context.
number
# activeFormGroupIndex
When working with multiple form groups (form arrays), this indicates which form group is currently active or being edited. This is used to manage focus and data binding in multi-entry scenarios.
Index of the currently active form group in a form array.
- Default Value:
- 0
number
# activeFormGroupIndex
When working with multiple form groups (form arrays), this indicates which form group is currently active or being edited. This is used to manage focus and data binding in multi-entry scenarios.
Index of the currently active form group in a form array.
- Default Value:
- 0
string
# different
Field name that this field's value must differ from.
Field name that this field's value must differ from.
string
# different
Field name that this field's value must differ from.
Field name that this field's value must differ from.
boolean
# disabled
When true, the field cannot be edited by the user.
Whether the field is disabled.
boolean
# disabled
When true, the field cannot be edited by the user.
Whether the field is disabled.
string
# equals
Field name that this field's value must equal.
Field name that this field's value must equal.
string
# equals
Field name that this field's value must equal.
Field name that this field's value must equal.
FormControl
# formControl
The FormControl that manages this field's value, validation state, and user interactions.
Angular FormControl instance for this field.
FormControl
# formControl
The FormControl that manages this field's value, validation state, and user interactions.
Angular FormControl instance for this field.
string
# format
Date/time format string for parsing and display.
Date/time format string for parsing and display.
string
# format
Date/time format string for parsing and display.
Date/time format string for parsing and display.
string
# greaterThan
Field name that this field's value must be greater than.
Field name that this field's value must be greater than.
string
# greaterThan
Field name that this field's value must be greater than.
Field name that this field's value must be greater than.
string
# greaterThanOrEqual
Field name that this field's value must be greater than or equal to.
Field name that this field's value must be greater than or equal to.
string
# greaterThanOrEqual
Field name that this field's value must be greater than or equal to.
Field name that this field's value must be greater than or equal to.
string
# lessThan
Field name that this field's value must be less than.
Field name that this field's value must be less than.
string
# lessThan
Field name that this field's value must be less than.
Field name that this field's value must be less than.
string
# lessThanOrEqual
Field name that this field's value must be less than or equal to.
Field name that this field's value must be less than or equal to.
string
# lessThanOrEqual
Field name that this field's value must be less than or equal to.
Field name that this field's value must be less than or equal to.
boolean
# multiple
When true, the field is rendered as part of a FormArray structure.
Whether the field supports multiple values.
boolean
# multiple
When true, the field is rendered as part of a FormArray structure.
Whether the field supports multiple values.
function
# onChange
Function registered by Angular's forms system through registerOnChange. Called automatically when the field's value is updated to notify the form of the change.
Callback function invoked when the field value changes.
function
# onChange
Function registered by Angular's forms system through registerOnChange. Called automatically when the field's value is updated to notify the form of the change.
Callback function invoked when the field value changes.
function
# onTouch
Function registered by Angular's forms system through registerOnTouched. Called when the field is blurred or otherwise marked as touched.
Callback function invoked when the field is touched.
function
# onTouch
Function registered by Angular's forms system through registerOnTouched. Called when the field is blurred or otherwise marked as touched.
Callback function invoked when the field is touched.
KeyValue
|
FunctionLike
# optionsMapper
Defines how fields from the data model should be mapped to properties used by the component. This allows for flexible data binding between the model and the component's display logic. Can be either a key-value mapping object or a function that performs the mapping.
Field mapping configuration for options.
KeyValue
|
FunctionLike
# optionsMapper
Defines how fields from the data model should be mapped to properties used by the component. This allows for flexible data binding between the model and the component's display logic. Can be either a key-value mapping object or a function that performs the mapping.
Field mapping configuration for options.
number
# page
Indicates which page this field belongs to in a multi-page form structure.
Page number for multi-page forms.
number
# page
Indicates which page this field belongs to in a multi-page form structure.
Page number for multi-page forms.
HTMLElement
# protected parent
Used for DOM manipulation and event handling.
Reference to the parent HTML element.
HTMLElement
# protected parent
Used for DOM manipulation and event handling.
Reference to the parent HTML element.
FormParent
# parentForm
Reference to the parent FormGroup or FormArray that contains this field. When this field is part of a multi-entry structure, this contains the FormArray with all form groups. This enables management of multiple instances of the same field structure within a single form.
Parent form container for this field.
FormParent
# parentForm
Reference to the parent FormGroup or FormArray that contains this field. When this field is part of a multi-entry structure, this contains the FormArray with all form groups. This enables management of multiple instances of the same field structure within a single form.
Parent form container for this field.
string
# path
Used to locate this field within nested form structures.
Dot-separated path to this field in the form structure.
string
# path
Used to locate this field within nested form structures.
Dot-separated path to this field in the form structure.
function
# sf
Provides access to the sf (string format) function for formatting error messages and other string templates. Used primarily for localizing and parameterizing validation messages.
String formatting utility function.
function
# sf
Provides access to the sf (string format) function for formatting error messages and other string templates. Used primarily for localizing and parameterizing validation messages.
String formatting utility function.
PossibleInputTypes
# type
Determines the HTML input type or component type to render.
The input type of this field.
PossibleInputTypes
# type
Determines the HTML input type or component type to render.
The input type of this field.
string
|
number
|
Date
|
Array.<string>
# value
Can be a string, number, date, or array of strings for multi-select fields.
Current value of the field.
string
|
number
|
Date
|
Array.<string>
# value
Can be a string, number, date, or array of strings for multi-select fields.
Current value of the field.
Methods
# activeFormGroup() → {FormGroup}
Returns the appropriate FormGroup based on whether this field supports multiple values. For single-value fields, returns the main form group. For multi-value fields, returns the form group at the active index from the parent FormArray. If no formGroup is set, returns the parent of the formControl.
Gets the currently active form group based on context.
The currently active FormGroup for this field
FormGroup
# afterViewInit() → {HTMLElement}
Retrieves and returns the parent HTML element based on the current CRUD operation. For READ and DELETE operations, returns the immediate parent element. For CREATE and UPDATE operations, finds the parent div element and registers it with the form service.
Performs setup after the view has been initialized.
If unable to retrieve parent form element for CREATE/UPDATE operations
RenderingError
If the operation is invalid
InternalError
The parent element of the field
HTMLElement
# getErrors(parent) → {string|void}
Checks the form control for validation errors and returns formatted error messages. If errors exist, dispatches a validation error event to parent accordion components. Error messages are translated and formatted with relevant field properties.
Retrieves validation error messages for the field.
Parameters:
| Name | Type | Description |
|---|---|---|
parent |
HTMLElement
|
The parent HTML element used to find accordion components |
Formatted error message string, or void if no errors
string
|
void
# handleClearValue(event) → {void}
Set field value as undefined and proverride event propagation.
Clears the current form control value as a response to a UI interact
Parameters:
| Name | Type | Description |
|---|---|---|
event |
Event
|
The value to set |
void
# handleModalChildChanges(event) → {void}
Forces change detection when rendered inside a modal and synchronizes the select value with the directive state.
Handles IonSelect change override emitted from modal child components.
Parameters:
| Name | Type | Description |
|---|---|---|
event |
SelectCustomEvent.<SelectChangeEventDetail>
|
IonSelect change event containing the selected value. |
void
# async ngOnChanges(changes) → {void}
Overrides the parent ngOnChanges to handle changes to activeFormGroupIndex and value. When activeFormGroupIndex changes in a multiple field scenario, updates the active form group and form control. When value changes, updates the form control value. Delegates to parent implementation for initial change detection.
Angular lifecycle hook for detecting input property changes.
Parameters:
| Name | Type | Description |
|---|---|---|
changes |
SimpleChanges
|
Object containing the changed properties |
void
# onDestroy() → {void}
Unregisters the form group from the form service to prevent memory leaks and clean up form references.
Cleanup logic when the component is destroyed.
void
# registerOnChange(fn) → {void}
Part of Angular's ControlValueAccessor interface. Stores the function that Angular forms provides to be called when the field value changes.
Registers the onChange callback function.
Parameters:
| Name | Type | Description |
|---|---|---|
fn |
function
|
The function to be called on change |
void
# registerOnTouched(fn) → {void}
Part of Angular's ControlValueAccessor interface. Stores the function that Angular forms provides to be called when the field is touched/blurred.
Registers the onTouched callback function.
Parameters:
| Name | Type | Description |
|---|---|---|
fn |
function
|
The function to be called on touch |
void
# setDisabledState(isDisabled) → {void}
Part of Angular's ControlValueAccessor interface. Called by Angular forms when the disabled state of the control changes.
Sets the disabled state of the field.
Parameters:
| Name | Type | Description |
|---|---|---|
isDisabled |
boolean
|
Whether the field should be disabled |
void
# setValue(value) → {void}
Updates the form control's value and triggers validation. This is used when the value needs to be programmatically updated from outside the form control.
Sets the value of the form control.
Parameters:
| Name | Type | Description |
|---|---|---|
value |
unknown
|
The value to set |
void
# writeValue(obj) → {void}
Part of Angular's ControlValueAccessor interface. Sets the field's value when the form programmatically updates it. This is called by Angular forms when the model value changes.
Writes a value to the form field.
Parameters:
| Name | Type | Description |
|---|---|---|
obj |
string
|
The value to be set |
void