Documentation
Tutorials
Contributing Documentation For Developers
Test Results Test Coverage Github Repository Github Profile

Class

NgxFormService

NgxFormService(controls, formRegistry)

Constructor

# new NgxFormService(controls, formRegistry)

The NgxFormService provides utility methods for creating, managing, and validating Angular forms and form controls. It includes functionality for registering forms, adding controls, validating fields, and handling form data.

Service for managing Angular forms and form controls.

sequenceDiagram participant C as Component participant NFS as NgxFormService participant AF as Angular Forms C->>NFS: createFormFromComponents() NFS->>AF: new FormGroup() NFS->>NFS: addFormControl() NFS->>AF: addControl() NFS-->>C: Return FormGroup C->>NFS: validateFields() NFS->>AF: markAsTouched(), markAsDirty(), updateValueAndValidity() C->>NFS: getFormData() NFS->>AF: Get control values NFS-->>C: Return form data
Parameters:
Name Type Description
controls WeakMap.<AbstractControl, FieldProperties>

A WeakMap to store control properties.
formRegistry Map.<string, FormGroup>

A Map to store registered forms.

View Source lib/engine/NgxFormService.ts, line 47

Example
// Creating a form from components
const components = [
  { inputs: { name: 'username', type: 'text', required: true } },
  { inputs: { name: 'password', type: 'password', minLength: 8 } }
];
const form = NgxFormService.createFormFromComponents('loginForm', components, true);

// Validating fields
NgxFormService.validateFields(form);

// Getting form data
const formData = NgxFormService.getFormData(form);

Methods

# static addControlFromProps(id, componentProperties) → {AbstractControl}

Creates and adds a form control to a form (existing or new) based on the provided component properties.

Adds a control to a form based on component properties.

Parameters:
Name Type Description
id string

The unique identifier of the form.
componentProperties FieldProperties

The properties of the component to create the control from.

View Source lib/engine/NgxFormService.ts, line 712

The form or created control.

AbstractControl

# static addGroupToParent(formGroup, parentName, indexopt) → {FormGroup}

Creates and adds a new FormGroup to the specified parent FormArray based on the component properties stored in the parent's metadata. This is used for dynamic form arrays where new groups need to be added at runtime.

Adds a new group to a parent FormArray.

Parameters:
Name Type Attributes Default Description
formGroup FormGroup

The root form group containing the parent FormArray
parentName string

The name of the parent FormArray to add the group to
index number <optional>
 1

The index position where the new group should be added

View Source lib/engine/NgxFormService.ts, line 621

The newly created and added FormGroup

FormGroup

# static addRegistry(formId, formGroup) → {void}

Registers a FormGroup with a unique identifier. Throws an error if the identifier is already in use.

Adds a form to the registry.

Parameters:
Name Type Description
formId string

The unique identifier for the form.
formGroup FormGroup

The FormGroup to be registered.

View Source lib/engine/NgxFormService.ts, line 572

If a FormGroup with the given id is already registered.

Error
void

# static createFormFromComponents(id, components, registryopt) → {FormGroup}

Generates a FormGroup based on an array of component configurations and optionally registers it.

Creates a form from component configurations.

Parameters:
Name Type Attributes Default Description
id string

The unique identifier for the form.
components Array.<IComponentConfig>

An array of component configurations.
registry boolean <optional>
 false

Whether to register the created form.

View Source lib/engine/NgxFormService.ts, line 703

The created FormGroup.

FormGroup

# static enableAllGroupControls(formGroup) → {void}

Recursively enables all form controls within the provided FormGroup or FormArray. This is useful for making all controls interactive after they have been disabled.

Enables all controls within a FormGroup or FormArray.

Parameters:
Name Type Description
formGroup FormArray | FormGroup

The FormGroup or FormArray to enable all controls for

View Source lib/engine/NgxFormService.ts, line 664

void

# static fromProps(props, updateModeopt) → {FormControl}

Generates a FormControl with validators based on the provided component properties.

Creates a FormControl from component properties.

Parameters:
Name Type Attributes Default Description
props FieldProperties

The component properties.
updateMode FieldUpdateMode <optional>
 'change'

The update mode for the control.

View Source lib/engine/NgxFormService.ts, line 748

The created FormControl.

FormControl

# static getComponentPropsFromGroupArray(formGroup, keyopt, groupArrayNameopt) → {Partial.<FieldProperties>}

Extracts component properties stored in the form group metadata. If a FormGroup is provided and groupArrayName is specified, it will look for the FormArray within the form structure.

Retrieves component properties from a FormGroup or FormArray.

Parameters:
Name Type Attributes Description
formGroup FormGroup | FormArray

The form group or form array to extract properties from
key string <optional>

Optional key to retrieve a specific property
groupArrayName string <optional>

Optional name of the group array if formGroup is not a FormArray

View Source lib/engine/NgxFormService.ts, line 605

The component properties or a specific property if key is provided

Partial.<FieldProperties>

# static getControlFromForm(formId, pathopt) → {AbstractControl}

Finds and returns an AbstractControl from a registered form using the form id and optional path.

Retrieves a control from a registered form.

Parameters:
Name Type Attributes Description
formId string

The unique identifier of the form.
path string <optional>

The path to the control within the form.

View Source lib/engine/NgxFormService.ts, line 693

If the form is not found in the registry or the control is not found in the form.

Error

The requested AbstractControl.

AbstractControl

# static getFormData(formGroup) → {Record.<string, unknown>}

Extracts and processes the data from a FormGroup, handling different input types and nested form groups.

Retrieves form data from a FormGroup.

Parameters:
Name Type Description
formGroup FormGroup

The FormGroup to extract data from.

View Source lib/engine/NgxFormService.ts, line 720

An object containing the form data.

Record.<string, unknown>

# static getGroupFromParent(formGroup, parentName, indexopt) → {FormGroup}

Gets a FormGroup from the specified parent FormArray. If the group doesn't exist at the given index, it will create a new one using addGroupToParent.

Retrieves a FormGroup from a parent FormArray at the specified index.

Parameters:
Name Type Attributes Default Description
formGroup FormGroup

The root form group containing the parent FormArray
parentName string

The name of the parent FormArray to retrieve the group from
index number <optional>
 1

The index of the group to retrieve

View Source lib/engine/NgxFormService.ts, line 636

The FormGroup at the specified index

FormGroup

# static getParentEl(el, tag) → {HTMLElement}

Traverses up the DOM tree to find the nearest parent element with the specified tag.

Finds a parent element with a specific tag.

Parameters:
Name Type Description
el HTMLElement

The starting element.
tag string

The tag name to search for.

View Source lib/engine/NgxFormService.ts, line 766

If no parent with the specified tag is found.

Error

The found parent element.

HTMLElement

# static getPropsFromControl(control) → {FieldProperties}

Gets the FieldProperties associated with a FormControl from the internal WeakMap.

Retrieves properties from a FormControl.

Parameters:
Name Type Description
control FormControl

The FormControl to get properties for.

View Source lib/engine/NgxFormService.ts, line 756

The properties associated with the control.

FieldProperties

# static isUniqueOnGroup(formGroup, index, operationopt) → {boolean}

Validates that the primary key value in a FormGroup is unique among all groups in the parent FormArray. The uniqueness check behavior differs based on the operation type.

Checks if a value is unique within a FormArray group.

Parameters:
Name Type Attributes Default Description
formGroup FormGroup

The FormGroup to check for uniqueness
index number

The index of the current group within the FormArray
operation OperationKeys <optional>
 OperationKeys.CREATE

The type of operation being performed

View Source lib/engine/NgxFormService.ts, line 651

True if the value is unique, false otherwise

boolean

# static register(control, props)

Associates a control with its properties in the internal WeakMap.

Registers a control with its properties.

Parameters:
Name Type Description
control AbstractControl

The control to register.
props FieldProperties

The properties to associate with the control.

View Source lib/engine/NgxFormService.ts, line 774

# static removeRegistry(formId) → {void}

Deletes a FormGroup from the registry using its unique identifier.

Removes a form from the registry.

Parameters:
Name Type Description
formId string

The unique identifier of the form to be removed.

View Source lib/engine/NgxFormService.ts, line 580

void

# static reset(formGroup) → {void}

Recursively resets all controls in a form group, clearing values, errors, and marking them as pristine and untouched.

Resets a form group.

Parameters:
Name Type Description
formGroup FormGroup

The form group to reset.

View Source lib/engine/NgxFormService.ts, line 790

void

# static resolveParentGroup(formGroup, path) → {FormParentGroup}

Traverses the form group structure to find the parent group and control name for a given path.

Resolves the parent group and control name from a path.

Parameters:
Name Type Description
formGroup FormGroup

The root FormGroup.
path string

The path to the control.

View Source lib/engine/NgxFormService.ts, line 97

A tuple containing the parent FormGroup and the control name.

FormParentGroup

# static unregister(control) → {boolean}

Removes a control and its associated properties from the internal WeakMap.

Unregisters a control.

Parameters:
Name Type Description
control AbstractControl

The control to unregister.

View Source lib/engine/NgxFormService.ts, line 782

True if the control was successfully unregistered, false otherwise.

boolean

# static validateFields(control, pathopt) → {boolean}

Recursively validates all fields in a form control or form group, marking them as touched and dirty.

Validates fields in a form control or form group.

Parameters:
Name Type Attributes Description
control AbstractControl

The control or form group to validate.
path string <optional>

The path to the control within the form.

View Source lib/engine/NgxFormService.ts, line 730

If no control is found at the specified path or if the control type is unknown.

Error

True if all fields are valid, false otherwise.

boolean

# static validatorsFromProps(props) → {Array.<ValidatorFn>}

Creates an array of ValidatorFn based on the supported validation keys in the component properties.

Generates validators from component properties.

Parameters:
Name Type Description
props FieldProperties

The component properties.

View Source lib/engine/NgxFormService.ts, line 428

An array of validator functions.

Array.<ValidatorFn>