/*! * devextreme-angular * Version: 25.2.6 * Build date: Mon Mar 30 2026 * * Copyright (c) 2012 - 2026 Developer Express Inc. ALL RIGHTS RESERVED * * This software may be modified and distributed under the terms * of the MIT license. See the LICENSE file in the root of the project for details. * * https://github.com/DevExpress/DevExtreme */ import { TransferState, ElementRef, NgZone, OnDestroy, EventEmitter, OnChanges, DoCheck, SimpleChanges, QueryList } from '@angular/core'; import { AIIntegration } from 'devextreme/common/ai-integration'; import { Mode } from 'devextreme/common'; import { dxFormSimpleItem, dxFormGroupItem, dxFormTabbedItem, dxFormEmptyItem, dxFormButtonItem, LabelLocation, FormLabelMode, ContentReadyEvent, DisposingEvent, EditorEnterKeyEvent, FieldDataChangedEvent, InitializedEvent, OptionChangedEvent, SmartPastedEvent, SmartPastingEvent } from 'devextreme/ui/form'; import DxForm from 'devextreme/ui/form'; import { DxComponent, DxTemplateHost, NestedOptionHost, IterableDifferHelper, WatcherHelper, CollectionNestedOption } from 'devextreme-angular/core'; import type * as DxFormTypes from "devextreme/ui/form_types"; import * as i0 from "@angular/core"; import * as i1 from "devextreme-angular/ui/nested"; import * as i2 from "devextreme-angular/ui/form/nested"; import * as i3 from "devextreme-angular/core"; /** * The Form UI component represents fields of a data object as a collection of label-editor pairs. These pairs can be arranged in several groups, tabs and columns. */ export declare class DxFormComponent extends DxComponent implements OnDestroy, OnChanges, DoCheck { private _watcherHelper; private _idh; set _validationRulesContentChildren(value: QueryList); set _itemsContentChildren(value: QueryList); set _tabsContentChildren(value: QueryList); instance: DxForm; /** * Specifies the shortcut key that sets focus on the UI component. */ get accessKey(): string | undefined; set accessKey(value: string | undefined); /** * Specifies whether the UI component changes its visual state as a result of user interaction. */ get activeStateEnabled(): boolean; set activeStateEnabled(value: boolean); get aiIntegration(): AIIntegration | undefined; set aiIntegration(value: AIIntegration | undefined); /** * Specifies whether all item labels are aligned. Applies only to labels outside their editors (see labelMode). */ get alignItemLabels(): boolean; set alignItemLabels(value: boolean); /** * Specifies whether item labels in all groups are aligned. Applies only to labels outside their editors (see labelMode). */ get alignItemLabelsInAllGroups(): boolean; set alignItemLabelsInAllGroups(value: boolean); /** * The count of columns in the form layout. */ get colCount(): Mode | number; set colCount(value: Mode | number); /** * Specifies the number of Form columns for different screen sizes. */ get colCountByScreen(): { lg?: number | undefined; md?: number | undefined; sm?: number | undefined; xs?: number | undefined; }; set colCountByScreen(value: { lg?: number | undefined; md?: number | undefined; sm?: number | undefined; xs?: number | undefined; }); /** * Specifies a function that customizes a form item after it has been created. */ get customizeItem(): ((item: dxFormSimpleItem | dxFormGroupItem | dxFormTabbedItem | dxFormEmptyItem | dxFormButtonItem) => void); set customizeItem(value: ((item: dxFormSimpleItem | dxFormGroupItem | dxFormTabbedItem | dxFormEmptyItem | dxFormButtonItem) => void)); /** * Specifies whether the UI component responds to user interaction. */ get disabled(): boolean; set disabled(value: boolean); /** * Specifies the global attributes to be attached to the UI component's container element. */ get elementAttr(): Record; set elementAttr(value: Record); /** * Specifies whether the UI component can be focused using keyboard navigation. */ get focusStateEnabled(): boolean; set focusStateEnabled(value: boolean); /** * Provides the Form's data. Gets updated every time form fields change. */ get formData(): any; set formData(value: any); /** * Specifies the UI component's height. */ get height(): number | string | undefined; set height(value: number | string | undefined); /** * Specifies text for a hint that appears when a user pauses on the UI component. */ get hint(): string | undefined; set hint(value: string | undefined); /** * Specifies whether the UI component changes its state when a user pauses on it. */ get hoverStateEnabled(): boolean; set hoverStateEnabled(value: boolean); /** * Specifies whether current editor values differ from initial values. */ get isDirty(): boolean; set isDirty(value: boolean); /** * Holds an array of form items. */ get items(): Array; set items(value: Array); /** * Specifies the location of a label against the editor. Applies only to labels outside their editors (see labelMode). */ get labelLocation(): LabelLocation; set labelLocation(value: LabelLocation); /** * Specifies a display mode for item labels. */ get labelMode(): FormLabelMode; set labelMode(value: FormLabelMode); /** * The minimum column width used for calculating column count in the form layout. Applies only if colCount property is 'auto'. */ get minColWidth(): number; set minColWidth(value: number); /** * The text displayed for optional fields. Applies only if showOptionalMark is true. */ get optionalMark(): string; set optionalMark(value: string); /** * Specifies whether all editors on the form are read-only. Applies only to non-templated items. */ get readOnly(): boolean; set readOnly(value: boolean); /** * The text displayed for required fields. */ get requiredMark(): string; set requiredMark(value: string); /** * Specifies the message that is shown for end-users if a required field value is not specified. */ get requiredMessage(): string; set requiredMessage(value: string); /** * Switches the UI component to a right-to-left representation. */ get rtlEnabled(): boolean; set rtlEnabled(value: boolean); /** * Specifies a function that categorizes screens by their width. */ get screenByWidth(): Function; set screenByWidth(value: Function); /** * A Boolean value specifying whether to enable or disable form scrolling. */ get scrollingEnabled(): boolean; set scrollingEnabled(value: boolean); /** * Specifies whether a colon is displayed at the end of form labels. Applies only to labels outside their editors (see labelMode). */ get showColonAfterLabel(): boolean; set showColonAfterLabel(value: boolean); /** * Specifies whether or not the optional mark is displayed for optional fields. */ get showOptionalMark(): boolean; set showOptionalMark(value: boolean); /** * Specifies whether or not the required mark is displayed for required fields. */ get showRequiredMark(): boolean; set showRequiredMark(value: boolean); /** * Specifies whether or not the total validation summary is displayed on the form. */ get showValidationSummary(): boolean; set showValidationSummary(value: boolean); /** * Specifies the number of the element when the Tab key is used for navigating. */ get tabIndex(): number; set tabIndex(value: number); /** * Gives a name to the internal validation group. */ get validationGroup(): string | undefined; set validationGroup(value: string | undefined); /** * Specifies whether the UI component is visible. */ get visible(): boolean; set visible(value: boolean); /** * Specifies the UI component's width. */ get width(): number | string | undefined; set width(value: number | string | undefined); /** * A function that is executed when the UI component is rendered and each time the component is repainted. */ onContentReady: EventEmitter; /** * A function that is executed before the UI component is disposed of. */ onDisposing: EventEmitter; /** * A function that is executed when the Enter key has been pressed while an editor is focused. */ onEditorEnterKey: EventEmitter; /** * A function that is executed when the value of a formData object field is changed. */ onFieldDataChanged: EventEmitter; /** * A function used in JavaScript frameworks to save the UI component instance. */ onInitialized: EventEmitter; /** * A function that is executed after a UI component property is changed. */ onOptionChanged: EventEmitter; /** * */ onSmartPasted: EventEmitter; /** * */ onSmartPasting: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ accessKeyChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ activeStateEnabledChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ aiIntegrationChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ alignItemLabelsChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ alignItemLabelsInAllGroupsChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ colCountChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ colCountByScreenChange: EventEmitter<{ lg?: number | undefined; md?: number | undefined; sm?: number | undefined; xs?: number | undefined; }>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ customizeItemChange: EventEmitter<((item: dxFormSimpleItem | dxFormGroupItem | dxFormTabbedItem | dxFormEmptyItem | dxFormButtonItem) => void)>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ disabledChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ elementAttrChange: EventEmitter>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ focusStateEnabledChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ formDataChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ heightChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ hintChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ hoverStateEnabledChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ isDirtyChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ itemsChange: EventEmitter>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ labelLocationChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ labelModeChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ minColWidthChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ optionalMarkChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ readOnlyChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ requiredMarkChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ requiredMessageChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ rtlEnabledChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ screenByWidthChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ scrollingEnabledChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ showColonAfterLabelChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ showOptionalMarkChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ showRequiredMarkChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ showValidationSummaryChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ tabIndexChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ validationGroupChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ visibleChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ widthChange: EventEmitter; constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, _watcherHelper: WatcherHelper, _idh: IterableDifferHelper, optionHost: NestedOptionHost, transferState: TransferState, platformId: any); protected _createInstance(element: any, options: any): DxForm; ngOnDestroy(): void; ngOnChanges(changes: SimpleChanges): void; setupChanges(prop: string, changes: SimpleChanges): void; ngDoCheck(): void; _setOption(name: string, value: any): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } export declare class DxFormModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } export * from 'devextreme-angular/ui/form/nested'; export { DxFormTypes };