# new CrudFieldComponent(operation, name, type, value, disabled, label, placeholder, format, hidden, max, maxlength, min, minlength, pattern, readonly, required, step, formGroup, translatable)
The CrudFieldComponent is a versatile form field component that adapts to different input types and CRUD operations. It extends NgxFormFieldDirective to inherit form handling capabilities and implements lifecycle hooks to properly initialize, render, and clean up. This component supports various input types (text, number, date, select, etc.), validation rules, and styling options, making it suitable for building dynamic forms for create, read, update, and delete operations.
A dynamic form field component for CRUD operations.
Parameters:
| Name | Type | Description |
|---|---|---|
operation |
CrudOperations
|
The CRUD operation being performed (create, read, update, delete) |
name |
string
|
The field name, used as form control identifier |
type |
PossibleInputTypes
|
The input type (text, number, date, select, etc.) |
value |
string
|
number
|
Date
|
The initial value of the field |
disabled |
boolean
|
Whether the field is disabled |
label |
string
|
The display label for the field |
placeholder |
string
|
Placeholder text when field is empty |
format |
string
|
Format pattern for the field value |
hidden |
boolean
|
Whether the field should be hidden |
max |
number
|
Date
|
Maximum allowed value |
maxlength |
number
|
Maximum allowed length |
min |
number
|
Date
|
Minimum allowed value |
minlength |
number
|
Minimum allowed length |
pattern |
string
|
Validation pattern |
readonly |
boolean
|
Whether the field is read-only |
required |
boolean
|
Whether the field is required |
step |
number
|
Step value for number inputs |
formGroup |
FormGroup
|
The parent form group |
translatable |
StringOrBoolean
|
Whether field labels should be translated |
Example
<ngx-decaf-crud-field
operation="create"
name="firstName"
type="text"
label="<NAME>"
placeholder="<NAME>"
[value]="model.firstName"
[disabled]="model.readOnly">Members
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.
Methods
# async openSelectOptions(event, selectInterface) → {Promise.<void>}
Handles the opening of select options based on the specified interface type.
Handles the opening of select options based on the specified interface type.
If the selectInterface is 'modal', it prevents the default event behavior,
stops propagation, and opens a modal to display the select options.
Once the modal is dismissed, it sets the selected value if the action role
is confirmed and the selected value differs from the current value.
Parameters:
| Name | Type | Description |
|---|---|---|
event |
Event
|
The event triggered by the user interaction. |
selectInterface |
SelectInterface
|
The interface type for displaying select options. Currently supports 'modal'. |
A promise that resolves when the operation is complete.
Promise.<void>