import { FormGroup, ValidationErrors, ValidatorFn, AbstractControl, FormControl, ControlValueAccessor, FormGroupDirective, FormGroupName, FormControlDirective } from '@angular/forms'; import * as i0 from '@angular/core'; import { Type, Injector, DestroyRef, ChangeDetectorRef, WritableSignal, Signal, InputSignal, OutputRef, OnInit, OnDestroy, Provider, AfterViewInit, EmbeddedViewRef, ViewContainerRef, ElementRef, Renderer2, TemplateRef, InjectionToken } from '@angular/core'; import * as rxjs from 'rxjs'; import { BehaviorSubject, Observable, Subject } from 'rxjs'; import { ActivatedRouteSnapshot, RouterStateSnapshot, CanDeactivateFn } from '@angular/router'; interface AtLeastOneRequiredValidatorOptions { controls?: KeyType[]; conditionalFunction?: (data: any) => boolean; } /** * Exported Class */ declare class NgxValidators { /** * A validator to check if all or none of the values of a form group are filled in. * Particularly useful in situations where a form group field within itself is optional, * but all fields are required in case it does get filled in * * Returns an `allOrNothingRequiredError` error on the provided FormGroup and a `required` error on the individual controls * * @param control - A form group control */ static allOrNothingRequired(control: FormGroup): ValidationErrors | null; /** * A validator to check if at least one of the provided controls of the form group are filled in * * Returns an `atLeastOneRequiredError` error on the provided FormGroup and a `required` error on the individual controls * * @param options - An optional object with configuration options, see below params for more info * @param controlNames - Optional list of controls, if not provided the validator is applied to all controls of the group * @param conditionalFunction - Optional function the form value needs to return true to for the required to be se */ static atLeastOneRequired(options?: AtLeastOneRequiredValidatorOptions): ValidatorFn; /** * FormGroup validator which checks if an array of controls in the control are filled in if the depended control is filled in * * Returns a `hasDependedRequiredError` error on the provided FormGroup and a `required` error on the individual controls * * @param controls - An array of controls. * @param dependedControlKey - A control within the group which the other controls depend on. * @param matchFunction - Optional function the dependedControl should check */ static dependedRequired(controls: KeyType[], dependedControlKey: KeyType, matchFunction?: (data: any) => boolean): ValidatorFn; /** * Validates whether the inputted value has exceeded the maximum amount of decimals after the comma * * Returns an `invalidDecimalsAfterComma` error on the provided control * * @param max - The maximum number of decimals after the comma */ static decimalsAfterComma(max: number): ValidatorFn; /** * A FormGroup validator to check whether a start and end date are chronologically correct * * Returns an `incorrectChronologicalDates` error on the provided FormGroup and a `incorrectChronologicalDate` on the endControl * * @param startControlKey - The key of the control containing the start date value * @param endControlKey - The key of the control containing the end date value * @param format - Optional format of the dates provided by the controls, by default yyyy-MM-dd */ static chronologicalDates(startControlKey: string, endControlKey: string, format?: string): ValidatorFn; /** * Form control validator which validates if a date is between a provided range * * Returns an `invalidRange` error * * @param minDate - Minimum valid date * @param maxDate - Maximum valid date * @param format - Optional format used for all 3 dates, by default yyyy-MM-dd */ static dateRangeValidator(min: string, max: string, format?: string): ValidatorFn; } declare const isEmptyInputValue: (value: any) => boolean; /** * Removes an error from a form control * * @param control - Form control to remove the error from. * @param error - Name of the error to remove from the control. */ declare const clearFormError: (control: AbstractControl, error: string) => void; /** * Adds an error to a form control * * @param control - Form control to attach the error to. * @param error - Name of the error to attach to the control. * @param value - Value of the error being attached to the control */ declare const setFormError: (control: AbstractControl, error: string, value?: unknown) => void; type FormAccessorControlsEntity = FormAccessorFormType extends FormGroup ? ControlPaths | 'formAccessorSelf' : 'formAccessorSelf'; type Previous = [ never, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, ...0[] ]; type Join = Key extends string | number ? Path extends string | number ? `${Key}${'' extends Path ? '' : '.'}${Path}` : never : never; type ControlPaths = [ Depth ] extends [never] ? never : FormAccessorFormType extends FormGroup ? { [Key in keyof FormAccessorFormType['controls']]-?: Key extends string | number ? `${Key}` | Join> : never; }[keyof FormAccessorFormType['controls']] : ''; interface FormStateOptionsEntity { onlySelf?: boolean; emitEvent?: boolean; } type NgxFormsErrorLocationSettings = 'before' | 'after'; type NgxFormsErrorShowWhenSettings = 'touched' | 'dirty'; type NgxFormsErrorShowSettings = 'all' | number; /** * Configuration for the ngx-errors directive * * errors - A record with the error key and the corresponding message we wish to show * showWhen - A setting to know when an error has to be shown. Either 'touched' or 'dirty' * component - An optional component to provide, which will be used to render the error. If not provided, * it will render a p-tag with class `ngx-forms-error` * show - The amount of errors we wish to show at once. By default, only one error is shown at a time. * location - Whether we want the error component the be rendered before or after the input element. By default, this is after. */ interface NgxFormsErrorConfigurationOptions { errors: Record; showWhen: NgxFormsErrorShowWhenSettings; component?: Type; show?: NgxFormsErrorShowSettings; location?: NgxFormsErrorLocationSettings; } /** * Maps an object interface to a (nested) FormGroup interface * * IMPORTANT: This does not provide FormArrays automatically */ type NgxFormInterface = { [key in keyof DataType]: [DataType[key]] extends [object] ? FormGroup> : FormControl; }; type NgxDynamicFormConfiguration = Record>; /** * In order to select all accessors in a FormContainer, we need this base class to pass to our ViewChildren. * * IMPORTANT: This will never be used as an actual functional component */ declare class BaseFormAccessor { } declare abstract class NgxFormsControlValueAccessor implements ControlValueAccessor { /** * The Injector needed in the constructor */ protected readonly injector: Injector; /** * The initial value of the form */ protected defaultValue: Partial; /** * The OnDestroyRef reference */ protected readonly destroyRef: DestroyRef; /** * The ChangeDetector reference */ readonly cdRef: ChangeDetectorRef; /** * A subject to hold the parent control */ protected readonly parent: WritableSignal; /** * A reference to the control tied to this control value accessor */ protected parentControl: Signal; /** * Whether the first setDisable has run */ protected initialSetDisableHasRun: boolean; /** * Subject to check whether the form is initialized */ protected readonly initializedSubject$: BehaviorSubject; /** * Whether or not we want to emit a value when we use the disableFields, by default this will emit * * @param keys - Keys we're about to disable */ protected emitValueWhenDisableFieldsUsingInput?(keys: FormAccessorControlsEntity[]): boolean; /** * A list of all DataFormAccessors en FormAccessors of this component */ protected readonly accessors: Signal; /** * An observable that emits whenever the form is initialized */ initialized$: Observable; /** * Inner form to write to */ form: FormAccessorFormType; /** * Keys of the fields we wish to disable. * By default this will emit a valueChanges, this can be overwritten by the emitValueWhenDisableFieldsUsingInput in the Accessor * * @memberof FormAccessor */ disableFields: InputSignal[]>; /** * Whether we want to skip the first setDisable (https://github.com/angular/angular/pull/47576). * By default, this is true */ readonly skipInitialSetDisable: InputSignal; /** * Emits to know whether the form has been initialized */ readonly initializedForm: OutputRef; constructor(); /** * Sets up the ControlValueAccessor connectors */ onTouch: Function; onChange: Function; registerOnChange(fn: any): void; registerOnTouched(fn: any): void; /** * Writes value to the inner form * * @param value - Value to patch in the inner form */ writeValue(value: DataType | undefined | null): void; /** * Mark all controls of the form as touched */ markAsTouched(options?: FormStateOptionsEntity): void; /** * Mark all controls of the form as dirty */ markAsDirty(options?: FormStateOptionsEntity): void; /** * Mark all controls of the form as pristine */ markAsPristine(options?: FormStateOptionsEntity): void; /** * Update the value and validity of the provided form */ updateAllValueAndValidity(options: FormStateOptionsEntity): void; /** * Validates the inner form */ validate(): ValidationErrors | null; /** * Disables/enables the inner form based on the passed value * * @param isDisabled - Whether or not the form should be disabled */ setDisabledState(isDisabled: boolean): void; /** * Optional method to map the inner form value to an outer form specific format * * @param value - Value from the form */ onChangeMapper?(value: Partial): DataType; /** * Optional method to map the outer form value to an inner form specific format * * @param value - Value from the form */ onWriteValueMapper?(value: DataType): FormValueType; static ɵfac: i0.ɵɵFactoryDeclaration, never>; static ɵdir: i0.ɵɵDirectiveDeclaration, never, never, { "disableFields": { "alias": "disableFields"; "required": false; "isSignal": true; }; "skipInitialSetDisable": { "alias": "skipInitialSetDisable"; "required": false; "isSignal": true; }; }, { "initializedForm": "initializedForm"; }, never, never, true, never>; } declare abstract class FormAccessor extends NgxFormsControlValueAccessor implements OnInit { /** * Method to set up the inner form */ abstract initForm(): FormAccessorFormType; ngOnInit(): void; static ɵfac: i0.ɵɵFactoryDeclaration, never>; static ɵdir: i0.ɵɵDirectiveDeclaration, never, never, {}, {}, never, never, true, never>; } declare abstract class DataFormAccessor extends NgxFormsControlValueAccessor implements OnDestroy, OnInit { /** * Keep a reference to the current data so we don't make a new form if the data itself hasn't changed */ protected currentData: ConstructionDataType; /** * A subject that emits when the form has been destroyed in favor of a new one */ protected readonly destroyFormSubject$: Subject; /** * Method to set up the inner form */ abstract initForm(data: ConstructionDataType): FormAccessorFormType; /** * The data we wish to use to set up the form */ readonly data: InputSignal; /** * Whether we want to preserve previously filled in form data when new data is provided. By default, this is false. */ readonly preserveFormValueOnNewData: InputSignal; /** * An observable that emits when the input data changes */ protected readonly data$: Observable; ngOnInit(): void; ngOnDestroy(): void; /** * setInitialized * * This method sets the initialized property to true when the form is initialized. * This functionality has been moved to a separate method to enable * overwriting this method to fit certain use-cases. * * @param {ConstructionDateType} data * @returns void * @private */ protected setInitializedWithData(data: ConstructionDataType): void; static ɵfac: i0.ɵɵFactoryDeclaration, never>; static ɵdir: i0.ɵɵDirectiveDeclaration, never, never, { "data": { "alias": "data"; "required": true; "isSignal": true; }; "preserveFormValueOnNewData": { "alias": "preserveFormValueOnNewData"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>; } declare class FormAccessorContainer implements OnDestroy { /** * A list of all DataFormAccessors en FormAccessors of this component */ readonly accessors: i0.Signal; /** * Destroyed state of the component */ protected readonly destroyed$: Subject; /** * @deprecated This method should no longer be used, use the markAsDirty on the form itself instead * * Marks the form and all the inputs of every subsequent form-accessors as dirty * * @param form - The form used in the component * @param options - Options passed to the form state changer */ markAllAsDirty(form: AbstractControl, options?: FormStateOptionsEntity): void; /** * @deprecated This method should no longer be used, use the markAsTouched on the form itself instead * * Marks the form and all the inputs of every subsequent form-accessors as touched * * @param form - The form used in the component * @param options - Options passed to the form state changer */ markAllAsTouched(form: AbstractControl, options?: FormStateOptionsEntity): void; /** * Updates the value and validity of the form and all the inputs of every subsequent form-accessors * * @param form - The provided forms * @param options - Options passed to the updateValueAndValidity */ updateAllValueAndValidity(form: AbstractControl, options?: FormStateOptionsEntity): void; /** * Handle the destroy state of the component */ ngOnDestroy(): void; /** * Handle the accessors action of the FormContainer and throw a warning if no accessors are provided * * @param action - The provided action */ private handleAccessorsAction; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare class NgxFormsErrorAbstractComponent { /** * An array of error messages that can be rendered */ readonly errors: i0.InputSignal; /** * An array of error keys that can be rendered */ readonly errorKeys: i0.InputSignal; /** * The error object provided by the control */ readonly data: i0.InputSignal; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare abstract class NgxSaveOnExitComponent implements OnDestroy { /** * Handles the unload event of the browser and will warn the user that the application prevented the user from closing the browser * * @param event - The unload event from the browser */ handleUnloadEvent(event: BeforeUnloadEvent): void; /** * A subject to handle the onDestroy flow */ private readonly destroyedSubject$; /** * An observable that emits the onDestroy event */ readonly destroyed$: rxjs.Observable; /** * Whether or not the beforeUnload event should be intercepted or not. By default, this behavior is set to false * If set to true, closing a tab or the browser will be interrupted and a message will be displayed */ readonly allowBeforeUnloadHandler: boolean; /** * Return whether or not the component is dirty */ abstract isDirty(): boolean; /** * Return whether or not the component is valid */ abstract isValid(): boolean; ngOnDestroy(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare abstract class NgxSaveOnExitAbstractService { /** * Take action when the component is dirty */ abstract handleDirtyState: (component: NgxSaveOnExitComponent) => Observable; /** * An optional method that, if implemented, provides the ability to bypass the guard */ bypassSaveOnExit?: (currentRoute: ActivatedRouteSnapshot, nextState: RouterStateSnapshot) => boolean; } /** * The base component configuration for an input rendered in a NgxDynamicFormComponent * * @template OptionsType - The type of the options used to render the input * @template DataType - The type of the data of the form control * @template FormAccessorFormType - The type of form control * @template FormValueType - The type of data used inside the form */ declare abstract class NgxDynamicFormInputComponent extends FormAccessor { /** * Options to render the input component */ readonly options: InputSignal; static ɵfac: i0.ɵɵFactoryDeclaration, never>; static ɵdir: i0.ɵɵDirectiveDeclaration, never, never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>; } /** * Disables and enables a form's control based on a set of provided keys * * @param form - The form we wish to disable the controls for * @param controlKeys - A set of keys of the controls * @param emitEvent - Whether or not we wish to emit the event */ declare const handleFormAccessorControlDisabling: (form: AbstractControl, controlKeys: Set, emitEvent: boolean) => void; /** * Marks a form and all the form-accessors this form is based on as dirty * * @param form - The form we wish to mark as dirty * @param accessors - An array of all the accessors we wish to mark as dirty * @param options - Form state options we wish to provide */ declare const handleFormAccessorMarkAsDirty: (form: AbstractControl, accessors: (FormAccessor | DataFormAccessor)[], options?: FormStateOptionsEntity) => void; /** * Marks a form and all the form-accessors this form is based on as touched * * @param form - The form we wish to mark as touched * @param accessors - An array of all the accessors we wish to mark as touched * @param options - Form state options we wish to provide */ declare const handleFormAccessorMarkAsTouched: (form: AbstractControl, accessors: (FormAccessor | DataFormAccessor)[], options?: FormStateOptionsEntity) => void; /** * Marks a form and all the form-accessors this form is based on as pristine * * @param form - The form we wish to mark as pristine * @param accessors - An array of all the accessors we wish to mark as pristine * @param options - Form state options we wish to provide */ declare const handleFormAccessorMarkAsPristine: (form: AbstractControl, accessors: (FormAccessor | DataFormAccessor)[], options?: FormStateOptionsEntity) => void; /** * Updates a form and all the form-accessors this form i * * @param form - The form we wish to update the value and validity of * @param accessors - An array of all the accessors we wish to update the value and validity of * @param options - Form state options we wish to provide */ declare const handleFormAccessorUpdateValueAndValidity: (form: AbstractControl, accessors: (FormAccessor | DataFormAccessor)[], options?: FormStateOptionsEntity) => void; /** * Adds a deep update value and validity to the existing update value and validity * * @param form - The provided abstract control * @param options - The options we wish to call along with the update value and validity function */ declare const updateAllValueAndValidity: (form: AbstractControl, options?: FormStateOptionsEntity) => void; /** * Allows for a deep updateValueAndValidity of all controls. Can be used for a FormGroup or a FormArray * * @param controls - The controls we wish to update the value and validity of * @param onlySelf - Whether or not we want it to be only the control itself and not the direct ancestors. Default this is true */ declare const deepUpdateValueAndValidity: (controls: Record | AbstractControl[], options?: FormStateOptionsEntity) => void; /** * Allows for a deep markAsDirty of all controls. Can be used for a FormGroup or a FormArray * * @param controls - The controls we wish to update the value and validity of * @param onlySelf - Whether or not we want it to be only the control itself and not the direct ancestors. Default this is true */ declare const markAllAsDirty: (controls: Record | AbstractControl[], options?: FormStateOptionsEntity) => void; /** * Recursively checks if a form and its possible children have an error * * @param control - The provided abstract control */ declare const hasErrors: (control: AbstractControl) => boolean; /** * Listen to the touched event of a control * * @param control - An AbstractControl */ declare const touchedEventListener: (control: AbstractControl) => Observable; /** * An interface to wrap an component class in. * * This interface is for internal use, as a similar one already exists in the CDK, but we don't want to create a dependency on that for this package. */ interface ComponentTypeWrapper { new (...args: any[]): ComponentType; } /** * Generates the necessary providers for a (Data)FormAccessor. * * @param component - The component class of the (Data)FormAccessor */ declare const createAccessorProviders: (component: ComponentTypeWrapper) => Provider[]; declare class NgxFormsErrorsDirective implements AfterViewInit { protected errorViewContainer: EmbeddedViewRef; /** * An optional instance of the FormGroup directive */ protected readonly formGroupDirective: FormGroupDirective; /** * An optional instance of the FormGroupName directive */ protected readonly formNameDirective: FormGroupName; /** * The optional global configuration used form the NgxFormsError */ private readonly config; /** * An instance of the ViewContainerRef */ protected readonly viewContainer: ViewContainerRef; /** * An instance of the ElementRef */ protected readonly elementRef: ElementRef; /** * An instance of Renderer2 */ protected readonly renderer: Renderer2; /** * An instance of the TemplateRef */ protected readonly templateRef: TemplateRef; /** * An instance of the ChangeDetectorRef */ protected readonly cdRef: ChangeDetectorRef; /** * An instance of the DestroyRef */ protected readonly destroyRef: DestroyRef; /** * Whether the control has errors */ protected hasErrors: WritableSignal; /** * A unique error id for aria association */ private readonly errorId; /** * The actual template of the input element */ private template; /** * The AbstractControl we wish to listen to when using the directive */ private abstractControl; /** * The p element we add to the dom when no component is provided */ private errorsElement; /** * The component to which the error data is added */ private errorComponent; /** * The ref of the component we wish to add error data to */ private componentRef; /** * A reference to a control or a string reference to the control */ readonly control: i0.InputSignal>; constructor(); ngAfterViewInit(): void; /** * Renders a provided custom component underneath the input component * * @param shouldShow - Whether the error should be shown */ private handleComponentRender; /** * Renders a p tag underneath the input component when no custom component was provided * * @param shouldShow - Whether the error should be shown */ private handleNoComponentFlow; /** * Returns the errors based on the provided settings * * @param data - The error data we wish to use */ private getErrors; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * A custom directive used by the NgxDynamicFormComponent, as the base FormControlDirective is not a standalone directive */ declare class NgxDynamicFormDirective extends FormControlDirective { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare const NgxFormsErrorsConfigurationToken: InjectionToken; declare const NgxDynamicFormConfigurationToken: InjectionToken; /** * Checks whether or not we can navigate away from a page * * @param {NgxSaveOnExitComponent} component * @return {*} {ObservableBoolean} * @memberof SaveOnExitGuard */ declare const NgxSaveOnExitGuard: CanDeactivateFn; /** * Provides the necessary configuration for the NgxFormErrorsDirective * * @param configuration - The configuration for the directive */ declare const provideNgxFormErrorsConfiguration: (configuration: NgxFormsErrorConfigurationOptions) => Provider; /** * Provides the necessary configuration for the NgxDynamicFormComponent * * @param configuration - The configuration for the component */ declare const provideNgxDynamicFormConfiguration: (configuration: NgxDynamicFormConfiguration) => Provider; /** * A dynamic form component that will dynamically render an input component based on the provided key * * ## Accessibility Guidelines * - **Explicit Label Association**: When rendering dynamic input components using ``, developers must ensure that every generated form control is linked to an accessible label via a native `