@qoollo/ngx-form-url-saver/lib/form-url-saver.directive.d.ts

Angular directive for syncing form's data with URL query

import { ActivatedRoute, Router } from '@angular/router';
import { AfterViewInit, ChangeDetectorRef, OnDestroy } from '@angular/core';
import { AsyncValidator, AsyncValidatorFn, FormGroupDirective, UntypedFormGroup, Validator, ValidatorFn } from '@angular/forms';
import { ValueHandlingStrategy } from './form-value-handling-strategies/value-handling-strategy.interface';
import * as i0 from "@angular/core";
/**
 * @description
 * The directive is a descendant of Angular `FormGroupDirective`
 * and is used to automatically write the `FormGroup` value to the query parameters.
 *
 * {@link https://github.com/angular/angular/blob/main/packages/forms/src/directives/reactive_directives/form_group_directive.ts Angular FormGroupDirective}
 *
 * Allows you to set a delay (_debounce_) for query updates.
 *
 * Allows you to select the method (_strategy_) of writing query parameters.
 * 'united' - the form value will be completely written in one parameter
 * 'separated' - each form field will be written in its own query parameter.
 * 'complex' - each form field will be written in its own query parameter, while saving nested objects in the form is supported.
 *
 * It is possible to override the behavior of converting the form value to a string.
 * Default is JSON.stringify.
 * Use the ValueHandlingStrategy interface and FORM_VALUE_HANDLING_TOKEN
 *
 */
export declare class FormUrlSaverDirective extends FormGroupDirective implements AfterViewInit, OnDestroy {
    private readonly router;
    private readonly activatedRoute;
    private readonly cdr;
    private readonly formHandlingStrategy;
    /**
     * Default Angular FormGroupDirective dependencies
     */
    private readonly _validators;
    private readonly _asyncValidators;
    private readonly BASE_DEBOUNCE_TIME;
    form: UntypedFormGroup;
    /**
     * Query parameter update delay time
     */
    debounceTime: number;
    /**
     * Strategy for creating query parameters.
     *
     * If 'united' is specified, the form value will be completely written using the key of one query parameter
     *
     * If 'separated' is specified, each form field will be written with a separate key corresponding to its name in the form
     *
     * If 'complex' is specified, each form field will be written in its own query parameter, while saving nested objects in the form is supported.
     */
    strategy: 'united' | 'separated' | 'complex';
    /**
     * The key by which the form value will be written if the 'united' strategy is selected.
     */
    queryKey: string;
    useDateTime: boolean;
    /**
     * Map consisting of a path to an object in a form and a function that converts a value from an any data to another data structure.
     * Data transform function called after `query strategy` parsed url in `ngAfterViewInit` lifecycle hook and updated parsed object
     * then patch form with updated object
     *
     * ### Example:
     * ```typescript
     * form = new FormGroup({
     *  date: new FormControl<string | null>(null),
     * });
     * // After url parsed by strategy and return object dataTransformMap will apply.
     * dataTransformMap = new Map([
     * // Apply to parsed object and transform value (apply data transform function) by path 'date'
     *  ['date', (data: string) => data ? new Date(data) : data]
     * ])
     * // date will parsed by strategy as string
     * urlQuery = '/?form={"date":"2024-10-29T21:00:00.000Z"}'
     * ```
     * ```html
     * <form [ngxFormUrlSaver]="form">
     *  <!-- primeNg calendar -->
     *  <p-calendar formControlName="date" dateFormat="dd.mm.yy"/>
     * </form>
     * ```
     *
     * @type {Map<string, function(any): any>}
     * @param {string} key - path to form value nested object. Path look like 'path.to.object.key' or 'path' if root
     * @param {function(any): any} value - converting function from any data to any data structure
     */
    dataTransformMap?: Map<string, (data: any) => any>;
    private formValueChangedSubscription?;
    private queryStrategy;
    constructor(router: Router, activatedRoute: ActivatedRoute, cdr: ChangeDetectorRef, formHandlingStrategy: ValueHandlingStrategy, 
    /**
     * Default Angular FormGroupDirective dependencies
     */
    _validators: Array<(Validator | ValidatorFn)>, _asyncValidators: Array<(AsyncValidator | AsyncValidatorFn)>);
    ngAfterViewInit(): void;
    ngOnDestroy(): void;
    private getUpdatedObjectByPath;
    private fillFormFromQuery;
    private createQueryGenerationStrategy;
    private subscribeToFormValueChanges;
    private clearFormQuery;
    static ɵfac: i0.ɵɵFactoryDeclaration<FormUrlSaverDirective, [null, null, null, null, { optional: true; self: true; }, { optional: true; self: true; }]>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<FormUrlSaverDirective, "[ngxFormUrlSaver]", never, { "form": { "alias": "ngxFormUrlSaver"; "required": false; }; "debounceTime": { "alias": "debounceTime"; "required": false; }; "strategy": { "alias": "strategy"; "required": false; }; "queryKey": { "alias": "queryKey"; "required": false; }; "useDateTime": { "alias": "useDateTime"; "required": false; }; "dataTransformMap": { "alias": "dataTransformMap"; "required": false; }; }, {}, never, never, true, never>;
}