Stepper Form Demo: fix reset form data in Angular and Vue (#30185)

Author: anna-shakhova

apps/demos/Demos/Stepper/FormIntegration/Angular/app/app.component.ts

@@ -115,8 +115,6 @@ export class AppComponent {
     this.selectedIndex = 0;
     this.steps = this.appService.getInitialSteps();
     this.formData = this.appService.getInitialFormData();
-    validationEngine.resetGroup(this.validationGroups[0]);
-    validationEngine.resetGroup(this.validationGroups[1]);
     this.isStepperReadonly = false;
   }
 

apps/demos/Demos/Stepper/FormIntegration/Angular/app/dates-form/dates-form.component.html

@@ -3,7 +3,11 @@
   that information in Additional Requests. We will do our best to suggest best
   pricing options, depending on room availability.
 </p>
-<dx-form [(formData)]="formData" [validationGroup]="validationGroup">
+<dx-form
+  #formComponent
+  [(formData)]="formData"
+  [validationGroup]="validationGroup"
+>
   <dxi-form-item
     [isRequired]="true"
     dataField="dates"

apps/demos/Demos/Stepper/FormIntegration/Angular/app/dates-form/dates-form.component.ts

@@ -1,5 +1,5 @@
-import { Component, Input } from '@angular/core';
-import { DxFormTypes } from 'devextreme-angular/ui/form';
+import { Component, Input, SimpleChanges, ViewChild } from '@angular/core';
+import { DxFormTypes, DxFormComponent } from 'devextreme-angular/ui/form';
 import { DxDateRangeBoxTypes } from 'devextreme-angular/ui/date-range-box';
 import type { BookingFormData } from '../app.types';
 
@@ -14,10 +14,20 @@ if (window && window.config?.packageConfigPaths) {
   templateUrl: `.${modulePrefix}/dates-form/dates-form.component.html`,
 })
 export class DatesFormComponent {
+  @ViewChild('formComponent', { static: false }) form!: DxFormComponent
+
   @Input() formData: BookingFormData;
 
   @Input() validationGroup: string;
 
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['formData']) {
+      const value = changes['formData'].currentValue;
+
+      this.form?.instance?.reset(value);
+    }
+  }
+
   dateRangeBoxOptions: DxDateRangeBoxTypes.Properties = {
     startDatePlaceholder: 'Check-in',
     endDatePlaceholder: 'Check-out',

apps/demos/Demos/Stepper/FormIntegration/Angular/app/guests-form/guests-form.component.html

@@ -4,6 +4,7 @@
   amenities.
 </p>
 <dx-form
+  #formComponent
   [(formData)]="formData"
   [validationGroup]="validationGroup"
   [colCount]="3"

apps/demos/Demos/Stepper/FormIntegration/Angular/app/guests-form/guests-form.component.ts

@@ -1,5 +1,5 @@
-import { Component, Input } from '@angular/core';
-import { DxFormTypes } from 'devextreme-angular/ui/form';
+import { Component, Input, SimpleChanges, ViewChild } from "@angular/core";
+import { DxFormTypes, DxFormComponent } from 'devextreme-angular/ui/form';
 import { DxNumberBoxTypes } from 'devextreme-angular/ui/number-box';
 import type { BookingFormData } from '../app.types';
 
@@ -14,10 +14,20 @@ if (window && window.config?.packageConfigPaths) {
   templateUrl: `.${modulePrefix}/guests-form/guests-form.component.html`,
 })
 export class GuestsFormComponent {
+  @ViewChild('formComponent', { static: false }) form!: DxFormComponent
+
   @Input() formData: BookingFormData;
 
   @Input() validationGroup: string;
 
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['formData']) {
+      const value = changes['formData'].currentValue;
+
+      this.form?.instance?.reset(value);
+    }
+  }
+
   adultsLabelOptions: DxFormTypes.SimpleItem["label"] = {
     text: 'Adults',
     location: 'top',

apps/demos/Demos/Stepper/FormIntegration/Angular/app/room-meal-plan-form/room-meal-plan-form.component.html

@@ -4,6 +4,7 @@
   full board.
 </p>
 <dx-form
+  #formComponent
   [(formData)]="formData"
   [validationGroup]="validationGroup"
   [colCount]="2"

apps/demos/Demos/Stepper/FormIntegration/Angular/app/room-meal-plan-form/room-meal-plan-form.component.ts

@@ -1,5 +1,5 @@
-import { Component, Input } from '@angular/core';
-import { DxFormTypes } from 'devextreme-angular/ui/form';
+import { Component, Input, SimpleChanges, ViewChild } from "@angular/core";
+import { DxFormTypes, DxFormComponent } from 'devextreme-angular/ui/form';
 import { DxSelectBoxTypes } from 'devextreme-angular/ui/select-box';
 import type { BookingFormData } from '../app.types';
 
@@ -14,10 +14,20 @@ if (window && window.config?.packageConfigPaths) {
   templateUrl: `.${modulePrefix}/room-meal-plan-form/room-meal-plan-form.component.html`,
 })
 export class RoomMealPlanFormComponent {
+  @ViewChild('formComponent', { static: false }) form!: DxFormComponent
+
   @Input() formData: BookingFormData;
 
   @Input() validationGroup: string;
 
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['formData']) {
+      const value = changes['formData'].currentValue;
+
+      this.form?.instance?.reset(value);
+    }
+  }
+
   roomLabelOptions: DxFormTypes.SimpleItem["label"] = {
     text: 'Room Type',
     location: 'top',

apps/demos/Demos/Stepper/FormIntegration/Vue/App.vue

@@ -169,8 +169,6 @@ const reset = () => {
   selectedIndex.value = 0;
   steps.value = getInitialSteps();
   formData.value = getInitialFormData();
-  validationEngine.resetGroup(validationGroups[0]);
-  validationEngine.resetGroup(validationGroups[1]);
   isStepperReadonly.value = false;
 };
 

apps/demos/Demos/Stepper/FormIntegration/Vue/DatesTemplate.vue

@@ -5,6 +5,7 @@
   <DxForm
     :form-data="formData"
     :validation-group="validationGroup"
+    ref="formRef"
   >
     <DxSimpleItem
       :is-required="true"
@@ -19,17 +20,24 @@
 <script setup lang="ts">
 import DxForm, { DxSimpleItem } from 'devextreme-vue/form';
 import 'devextreme/ui/date_range_box';
+import { ref, watch } from 'vue';
 import type { BookingFormData } from './types.ts';
-import { initialFormData } from './data.ts';
+import { getInitialFormData } from './data.ts';
+
+const formRef = ref(null);
 
 const props = withDefaults(defineProps<{
   formData: BookingFormData;
   validationGroup?: string;
 }>(), {
-  formData: () => initialFormData,
+  formData: getInitialFormData,
   validationGroup: () => undefined,
 });
 
+watch(() => props.formData, (value) => {
+  formRef.value.instance.reset(value);
+});
+
 const labelOptions = {
   visible: false,
 };

apps/demos/Demos/Stepper/FormIntegration/Vue/GuestsTemplate.vue

@@ -6,6 +6,7 @@
     :form-data="formData"
     :validation-group="validationGroup"
     :col-count="3"
+    ref="formRef"
   >
     <DxSimpleItem
       :is-required="true"
@@ -34,17 +35,24 @@
 <script setup lang="ts">
 import DxForm, { DxRangeRule, DxSimpleItem } from 'devextreme-vue/form';
 import 'devextreme/ui/number_box';
+import { watch, ref } from 'vue';
 import type { BookingFormData } from './types.ts';
-import { initialFormData } from './data.ts';
+import { getInitialFormData } from './data.ts';
+
+const formRef = ref(null);
 
 const props = withDefaults(defineProps<{
   formData: BookingFormData;
   validationGroup?: string;
 }>(), {
-  formData: () => initialFormData,
+  formData: getInitialFormData,
   validationGroup: () => undefined,
 });
 
+watch(() => props.formData, (value) => {
+  formRef.value.instance.reset(value);
+});
+
 const adultsLabelOptions = {
   text: 'Adults',
   location: 'top',