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..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,7 +14,77 @@ 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: + +- 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 { + formDataSignal = signal({ firstName: "John", lastName: "Doe", age: 30 }); + updateField(field: string, value: any) { + this.formDataSignal.update((d) => ({ ...d, [field]: value })); + } + } + +[/note] [tags] angular \ No newline at end of file