# new CrudFormComponent(action, operation, formGroup, rendererId, submitEvent, target, method)
Parameters:
| Name | Type | Description |
|---|---|---|
action |
string
|
The action to be performed (create, read, update, delete) |
operation |
CrudOperations
|
The CRUD operation being performed (create, read, update, delete) |
formGroup |
FormGroup
|
The form group |
rendererId |
string
|
The renderer id |
submitEvent |
SubmitEvent
|
The submit event |
target |
string
|
The target |
method |
string
|
The method |
Example
<ngx-decaf-crud-form
action="create"
operation="create"
formGroup="formGroup"
rendererId="rendererId"
submitEvent="submitEvent"
target="_self"
method="event">
</ngx-decaf-crud-form>Members
CrudOperations
# protected readonly OperationKeys
Exposes the OperationKeys enum to the component template, enabling conditional rendering and behavior based on operation types. This protected readonly property ensures that template logic can access operation constants while maintaining encapsulation and preventing accidental modification.
Reference to CRUD operation constants for template usage.
string
|
undefined
# action
Specifies a custom action name that will be included in the submit event. If not provided, defaults to the standard submit event constant. Used to distinguish between different types of form submissions within the same component.
Optional action identifier for form submission context.
string
# childOf
Full dot-delimited path of the parent FormGroup. Set only when is part of a nested structure.
Path to the parent FormGroup, if nested.
ElementRef
# component
ViewChild reference that provides direct access to the form's DOM element. This enables programmatic manipulation of the form element and access to native HTML form properties and methods when needed.
Reference to the reactive form DOM element.
FormGroup
|
undefined
# formGroup
The FormGroup instance that manages all form controls, validation, and form state. This is the main interface for accessing form values and controlling form behavior. May be undefined for read-only operations.
Angular reactive FormGroup for form state management.
HandlerLike
# handlers
A record of event handler functions keyed by event names that can be triggered during form operations. These handlers provide extensibility for custom business logic and can be invoked for various form events and actions.
Custom event handlers for form actions.
'get'
|
'post'
|
'event'
# method
Defines how the form should be submitted. 'get' and 'post' correspond to standard HTTP methods for traditional form submission, while 'event' uses Angular event-driven submission for single-page application workflows.
HTTP method or submission strategy for the form.
- Default Value:
- 'event'
View Source lib/components/crud-form/crud-form.component.ts, line 434
Model
|
undefined
# model
The data model repository that this component will use for CRUD operations. This provides a connection to the data layer for retrieving and manipulating data.
Repository model for data operations.
CrudOperations
# operation
Specifies the type of operation this form is handling (CREATE, READ, UPDATE, DELETE). This is a required input that determines form behavior, validation rules, and available actions. The operation affects form state, button visibility, and submission logic.
The current CRUD operation being performed.
CrudFormOptions
# options
Contains various configuration settings that control form rendering, validation, and behavior. These options are merged with default settings during component initialization to customize the form's functionality.
Configuration options for the CRUD form behavior.
string
# rendererId
A unique string identifier used to register and manage this form instance within the NgxFormService. This ID is also used as the HTML id attribute for the form element, enabling DOM queries and form management.
Unique identifier for the form renderer.
EventEmitter.<CrudFormEvent>
# submitEvent
Emits CrudFormEvent objects when the form is submitted, providing form data, component information, and any associated handlers to parent components. This enables decoupled handling of form submission logic.
Event emitter for form submission events.
HTMLFormTarget
# target
Specifies where to display the response after form submission, similar to the HTML form target attribute. Options include '_self', '_blank', '_parent', '_top', or a named frame. Controls the browser behavior for form responses.
Form submission target specification.
- Default Value:
- '_self'
View Source lib/components/crud-form/crud-form.component.ts, line 422
string
|
number
# uid
A unique identifier for the current record being displayed or manipulated. This is typically used in conjunction with the primary key for operations on specific records.
Unique identifier for the current record.
FieldUpdateMode
# updateOn
Determines when form field validation should be triggered. Options include 'change', 'blur', or 'submit'. This affects the user experience by controlling when validation feedback is shown to the user during form interaction.
Field update trigger mode for form validation.
- Default Value:
- 'change'
View Source lib/components/crud-form/crud-form.component.ts, line 399
CrudOperations
# protected static readonly OperationKeys
Exposes the OperationKeys enum to the component template, enabling conditional rendering and behavior based on operation types. This protected readonly property ensures that template logic can access operation constants while maintaining encapsulation and preventing accidental modification.
Reference to CRUD operation constants for template usage.
string
|
undefined
# static action
Specifies a custom action name that will be included in the submit event. If not provided, defaults to the standard submit event constant. Used to distinguish between different types of form submissions within the same component.
Optional action identifier for form submission context.
string
# static childOf
Full dot-delimited path of the parent FormGroup. Set only when is part of a nested structure.
Path to the parent FormGroup, if nested.
ElementRef
# static component
ViewChild reference that provides direct access to the form's DOM element. This enables programmatic manipulation of the form element and access to native HTML form properties and methods when needed.
Reference to the reactive form DOM element.
FormGroup
|
undefined
# static formGroup
The FormGroup instance that manages all form controls, validation, and form state. This is the main interface for accessing form values and controlling form behavior. May be undefined for read-only operations.
Angular reactive FormGroup for form state management.
HandlerLike
# static handlers
A record of event handler functions keyed by event names that can be triggered during form operations. These handlers provide extensibility for custom business logic and can be invoked for various form events and actions.
Custom event handlers for form actions.
'get'
|
'post'
|
'event'
# static method
Defines how the form should be submitted. 'get' and 'post' correspond to standard HTTP methods for traditional form submission, while 'event' uses Angular event-driven submission for single-page application workflows.
HTTP method or submission strategy for the form.
- Default Value:
- 'event'
View Source lib/components/crud-form/crud-form.component.ts, line 89
Model
|
undefined
# static model
The data model repository that this component will use for CRUD operations. This provides a connection to the data layer for retrieving and manipulating data.
Repository model for data operations.
CrudOperations
# static operation
Specifies the type of operation this form is handling (CREATE, READ, UPDATE, DELETE). This is a required input that determines form behavior, validation rules, and available actions. The operation affects form state, button visibility, and submission logic.
The current CRUD operation being performed.
CrudFormOptions
# static options
Contains various configuration settings that control form rendering, validation, and behavior. These options are merged with default settings during component initialization to customize the form's functionality.
Configuration options for the CRUD form behavior.
string
# static rendererId
A unique string identifier used to register and manage this form instance within the NgxFormService. This ID is also used as the HTML id attribute for the form element, enabling DOM queries and form management.
Unique identifier for the form renderer.
EventEmitter.<CrudFormEvent>
# static submitEvent
Emits CrudFormEvent objects when the form is submitted, providing form data, component information, and any associated handlers to parent components. This enables decoupled handling of form submission logic.
Event emitter for form submission events.
HTMLFormTarget
# static target
Specifies where to display the response after form submission, similar to the HTML form target attribute. Options include '_self', '_blank', '_parent', '_top', or a named frame. Controls the browser behavior for form responses.
Form submission target specification.
- Default Value:
- '_self'
View Source lib/components/crud-form/crud-form.component.ts, line 78
string
|
number
# static uid
A unique identifier for the current record being displayed or manipulated. This is typically used in conjunction with the primary key for operations on specific records.
Unique identifier for the current record.
FieldUpdateMode
# static updateOn
Determines when form field validation should be triggered. Options include 'change', 'blur', or 'submit'. This affects the user experience by controlling when validation feedback is shown to the user during form interaction.
Field update trigger mode for form validation.
- Default Value:
- 'change'
View Source lib/components/crud-form/crud-form.component.ts, line 57
Methods
# handleDelete() → {void}
Processes delete requests by emitting a submit event with the record's unique identifier as data. This allows parent components to handle the actual deletion logic while maintaining separation of concerns. The event includes the uid and standard component identification.
Handles delete operations by emitting delete events.
void
# handleReset() → {void}
Provides different reset behavior based on the current operation. For CREATE and UPDATE operations, resets the form to its initial state. For READ and DELETE operations, navigates back in the browser history since these operations don't have modifiable form data to reset.
Handles form reset or navigation back functionality.
void
# ngOnDestroy() → {void}
Performs cleanup operations when the component is destroyed. Unregisters the FormGroup from the NgxFormService to prevent memory leaks and ensure proper resource cleanup.
Component cleanup lifecycle method.
void
# async ngOnInit() → {Promise.<void>}
Initializes the component by setting up the logger, configuring form state based on the operation type, and merging configuration options. For READ and DELETE operations, the formGroup is set to undefined since these operations don't require form input. Configuration options are merged with default settings.
Component initialization lifecycle method.
Promise.<void>
# async submit(event) → {Promise.<(boolean|void)>}
Processes form submission by first preventing default browser behavior, then validating all form fields using NgxFormService. If validation passes, extracts form data and emits a submitEvent with the data, component information, and any associated handlers. Returns false if validation fails.
Handles form submission with validation and event emission.
Parameters:
| Name | Type | Description |
|---|---|---|
event |
SubmitEvent
|
The browser's native form submit event |
Returns false if validation fails, void if successful
Promise.<(boolean|void)>