DynamicForm
| Decorators: | @Component |
| Generic types: | TFields TModel |
| Selectors: | form[ |
| Implements: | OnDestroy |
Dynamic form component that renders a complete form based on configuration.
This is the main entry point for the dynamic form system. It handles form state management, validation, field rendering, and event coordination using Angular's signal-based reactive forms.
Constructor
No documentation has been provided. |
Presentation |
Properties
| Name | Type | Description |
|---|---|---|
| cleared r | OutputRef< | Emits when form is cleared to empty state. |
| config | InputSignal< | Form configuration defining the structure, validation, and behavior. |
| defaultValues r | WritableSignal<TModel> | |
| dirty r | Signal<boolean> | Whether any form field has been modified. |
| dirtyChange r | OutputRef<boolean> | Emits when form dirty state changes. |
| disabled r | Signal<boolean> | Whether the form is disabled (from options or form state). |
| effectiveFormOptions r | Signal<{ disabled?: boolean | undefined; maxDerivationIterations?: number | undefined; submitButton?: | |
| errors r | Signal<WithField[]> | Current validation errors from all fields. |
| events r | OutputRef< | Emits all form events for custom event handling. |
| fieldLoadingErrors r | WritableSignal<{ fieldType: string; fieldKey: string; error: Error; }[]> | Collects errors from async field component loading for error boundary patterns. |
| fieldSignalContext r | Signal< | |
| form r | Signal<FieldTree<TModel, string | number>> | |
| formModeDetection r | Signal< | |
| formOptions | InputSignal< | Runtime form options that override config options when provided. |
| formValue r | Signal<TModel | (TModel extends AbstractControl<unknown, infer TValue extends unknown, any> ? TValue : never)> | Current form values (reactive). |
| initialized r | OutputRef<boolean> | Emits when all form components are initialized and ready for interaction. Useful for E2E testing to ensure the form is fully rendered before interaction. |
| initialized$ r | Observable<boolean> | |
| invalid r | Signal<boolean> | Whether the form is currently invalid. |
| onPageChange r | OutputRef< | Emits when the current page changes in paged forms. |
| onPageNavigationStateChange r | OutputRef< | Emits when page navigation state changes (canGoNext, canGoPrevious, etc.). |
| pageFieldDefinitions r | Signal< | |
| reset r | OutputRef< | Emits when form is reset to default values. |
| resolvedFields p r | Signal< | |
| submitted r | OutputRef<TModel> | Emits form values when submitted (via SubmitEvent) and form is valid. Important: This output only emits when the form is valid. If you need to handle submit events regardless of validity, use the Note: Does not emit when |
| submitting r | Signal<boolean> | Whether the form is currently submitting. |
| touched r | Signal<boolean> | Whether any form field has been touched (blurred). |
| valid r | Signal<boolean> | Whether the form is currently valid. |
| validityChange r | OutputRef<boolean> | Emits when form validity changes. |
| value | ModelSignal<Partial<TModel> | undefined> | Form values for two-way data binding. |
Methods
ngOnDestroy()implements OnDestroy |
|---|
No documentation has been provided. |
Presentation |
Returnsvoid |
protected onNativeSubmit() | ||||||
|---|---|---|---|---|---|---|
Handles native form submission triggered by:
This method prevents the default form submission behavior (page reload) and dispatches a SubmitEvent through the EventBus for processing. | ||||||
Presentation | ||||||
Parameters
Returnsvoid |
Example usage
<form
[dynamic-form ]="formConfig"
[(value)]="formData"
(submitted)="handleSubmit($event)"
(validityChange)="handleValidityChange($event)">
</form>