From a631b3228d0e836390592ca7bacf7f313c253b21 Mon Sep 17 00:00:00 2001 From: Arman Boyakhchyan Date: Mon, 11 May 2026 11:21:08 +0400 Subject: [PATCH 1/3] Angular Form: Add formData Angular Signals Support Info --- .../dxForm/1 Configuration/formData.md | 9 ++++ ...0 Using Angular Signals with DevExtreme.md | 50 +++++++++++++++++++ 2 files changed, 59 insertions(+) diff --git a/api-reference/10 UI Components/dxForm/1 Configuration/formData.md b/api-reference/10 UI Components/dxForm/1 Configuration/formData.md index c1c1adbf5d..b58f04e6a7 100644 --- a/api-reference/10 UI Components/dxForm/1 Configuration/formData.md +++ b/api-reference/10 UI Components/dxForm/1 Configuration/formData.md @@ -9,6 +9,15 @@ firedEvents: fieldDataChanged Provides the Form's data. Gets updated every time form fields change. --- + +--- + +##### Angular + +[note] **formData** does not support Angular signals. For more information, refer to the following topic: [DevExtreme Angular - Using Angular Signals with DevExtreme](/Documentation/Guide/Angular_Components/Common_Features/Using_Angular_Signals_with_DevExtreme/). + +--- + #include btn-open-demo with { href: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/Common/FormsAndMultiPurpose/Overview/" } diff --git a/concepts/40 Angular Components/40 Common Features/20 Using Angular Signals with DevExtreme.md b/concepts/40 Angular Components/40 Common Features/20 Using Angular Signals with DevExtreme.md index e982ea3692..79775ea9a5 100644 --- a/concepts/40 Angular Components/40 Common Features/20 Using Angular Signals with DevExtreme.md +++ b/concepts/40 Angular Components/40 Common Features/20 Using Angular Signals with DevExtreme.md @@ -17,4 +17,54 @@ If you want to integrate this capability into your application, you can examine * The `selectedRows` signal monitors the state of the table and reports changes to the row selection. * The `selectionMessage` computed signal listens to the `selectedRows` signal. It joins the names of the selected employees into a single string. The table caption includes this string. +[note] + +**dxForm**.[formData](/Documentation/ApiReference/UI_Components/dxForm/Configuration/#formData) does not support signals. To use signals with **formData**, implement one of the following approaches: + +- Create a new object bound to a signal and synchronize this object with **formData** in [onFieldDataChanged](/Documentation/ApiReference/UI_Components/dxForm/Configuration/#onFieldDataChanged): + + + + + + import { Component, signal } from "@angular/core"; + import { DxFormModule, type DxFormTypes } from "devextreme-angular/ui/form"; + + // ... + export class AppComponent { + formData = { firstName: "John", lastName: "Doe", age: 30 }; + formDataSignal = signal({ ...this.formData }); + handleFieldDataChanged(e: DxFormTypes.FieldDataChangedEvent): void { + if (!e.dataField) return; + this.formDataSignal.set({ ...this.formData }); + } + } + + +- Configure item [templates](/Documentation/ApiReference/UI_Components/dxForm/Item_Types/SimpleItem/#template) for all dxForm fields and bind signals to each component's **value** property: + + + + +
+ +
+ + + + + import { Component, signal } from "@angular/core"; + + // ... + export class AppComponent { + dateFieldValue = signal(new Date()); + } + +[/note] + [tags] angular \ No newline at end of file From b956b5c9949a0cb315ebba8c44aa0d003cc2d864 Mon Sep 17 00:00:00 2001 From: Arman Boyakhchyan Date: Tue, 12 May 2026 12:26:40 +0400 Subject: [PATCH 2/3] Update Code Snippet Following Feedback --- ...0 Using Angular Signals with DevExtreme.md | 30 +++++++++++++++---- 1 file changed, 25 insertions(+), 5 deletions(-) diff --git a/concepts/40 Angular Components/40 Common Features/20 Using Angular Signals with DevExtreme.md b/concepts/40 Angular Components/40 Common Features/20 Using Angular Signals with DevExtreme.md index 79775ea9a5..ebc067f1d5 100644 --- a/concepts/40 Angular Components/40 Common Features/20 Using Angular Signals with DevExtreme.md +++ b/concepts/40 Angular Components/40 Common Features/20 Using Angular Signals with DevExtreme.md @@ -48,11 +48,28 @@ If you want to integrate this capability into your application, you can examine - +
- + +
+ + +
+ +
+ + +
+
@@ -62,7 +79,10 @@ If you want to integrate this capability into your application, you can examine // ... export class AppComponent { - dateFieldValue = signal(new Date()); + formDataSignal = signal({ firstName: "John", lastName: "Doe", age: 30 }); + updateField(field: string, value: any) { + this.formDataSignal.update((d) => ({ ...d, [field]: value })); + } } [/note] From ca68ed998df95b9ceae8a8bf0ef2f6c9a8c1df9b Mon Sep 17 00:00:00 2001 From: Arman Boyakhchyan Date: Thu, 14 May 2026 15:03:34 +0400 Subject: [PATCH 3/3] Apply suggestions from code review Co-authored-by: dirkpieterse --- .../20 Using Angular Signals with DevExtreme.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/concepts/40 Angular Components/40 Common Features/20 Using Angular Signals with DevExtreme.md b/concepts/40 Angular Components/40 Common Features/20 Using Angular Signals with DevExtreme.md index ebc067f1d5..aec4604ba9 100644 --- a/concepts/40 Angular Components/40 Common Features/20 Using Angular Signals with DevExtreme.md +++ b/concepts/40 Angular Components/40 Common Features/20 Using Angular Signals with DevExtreme.md @@ -14,12 +14,12 @@ If you want to integrate this capability into your application, you can examine } * The `prefix` signal in the example monitors the state of the "Prefix" dropdown. When the user changes the active option, the corresponding `effect` function filters the list of employees, and selects rows with employees that match the selected prefix. -* The `selectedRows` signal monitors the state of the table and reports changes to the row selection. -* The `selectionMessage` computed signal listens to the `selectedRows` signal. It joins the names of the selected employees into a single string. The table caption includes this string. +* `selectedRows` monitors the state of the table and reports changes to the row selection. +* `selectionMessage` listens to the `selectedRows` signal. It joins the names of the selected employees into a single string. The table caption includes this string. [note] -**dxForm**.[formData](/Documentation/ApiReference/UI_Components/dxForm/Configuration/#formData) does not support signals. To use signals with **formData**, implement one of the following approaches: +**dxForm**.[formData](/Documentation/ApiReference/UI_Components/dxForm/Configuration/#formData) does not support signals. To use signals with **formData**, implement one of the following: - Create a new object bound to a signal and synchronize this object with **formData** in [onFieldDataChanged](/Documentation/ApiReference/UI_Components/dxForm/Configuration/#onFieldDataChanged):