fix validation summary when validation rules are changed dynamically (#…

…12964) (#12975)
DevExpress · May 8, 2020 · 3cf597e · 3cf597e
1 parent cda593f
commit 3cf597e
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 1 deletion.
diff --git a/js/ui/form/ui.form.js b/js/ui/form/ui.form.js
@@ -917,7 +917,7 @@ const Form = Widget.inherit({
             !layoutManager._updateLockCount && layoutManager.beginUpdate();
             const key = this._itemsRunTimeInfo.getKeyByPath(path);
             this.postponedOperations.add(key, () => {
-                layoutManager.endUpdate();
+                !layoutManager._disposed && layoutManager.endUpdate();
                 return new Deferred().resolve();
             });
         }

diff --git a/testing/tests/DevExpress.ui.widgets.form/form.tests.js b/testing/tests/DevExpress.ui.widgets.form/form.tests.js
@@ -2058,6 +2058,90 @@ QUnit.test('The exception is not thrown when option of an unknown item is change
         assert.deepEqual(form.option('items[0].editorOptions'), { width: 200 }, 'editor options of first item');
         assert.deepEqual(form.option('items[1].buttonOptions'), { width: 100 }, 'button options of second item');
     });
+
+    QUnit.test(`Set a new validation rules when groups are nested one into another and use the ${optionWay} method`, function(assert) {
+        const form = $('#form').dxForm({
+            formData: {
+                name: null,
+                lastName: null
+            },
+            showValidationSummary: true,
+            items: [{
+                itemType: 'group',
+                name: 'group1',
+                items: [{
+                    dataField: 'name'
+                }, {
+                    itemType: 'group',
+                    name: 'group2',
+                    items: [{
+                        dataField: 'lastName'
+                    }]
+                }]
+            }]
+        }).dxForm('instance');
+
+        form.beginUpdate();
+
+        if(useItemOption) {
+            form.itemOption('group1.name', 'validationRules', [{ type: 'required', message: 'Name is required' }]);
+            form.itemOption('group1.group2.lastName', 'validationRules', [{ type: 'required', message: 'Last Name is required' }]);
+        } else {
+            form.option('items[0].items[0].validationRules', [{ type: 'required', message: 'Name is required' }]);
+            form.option('items[0].items[1].items[0].validationRules', [{ type: 'required', message: 'Last Name is required' }]);
+        }
+
+        form.endUpdate();
+        form.validate();
+
+        const $summaryItemContents = $('.dx-validationsummary-item-content');
+        assert.equal($summaryItemContents.length, 2, 'validation summary items count');
+        assert.equal($summaryItemContents.eq(0).text(), 'Name is required', 'text of the first summary item');
+        assert.equal($summaryItemContents.eq(1).text(), 'Last Name is required', 'text of the second summary item');
+    });
+
+    QUnit.test(`Set a new validation rules when tabs are nested into a group and use the ${optionWay} method`, function(assert) {
+        const form = $('#form').dxForm({
+            formData: {
+                name: null,
+                lastName: null
+            },
+            showValidationSummary: true,
+            items: [{
+                itemType: 'group',
+                name: 'group1',
+                items: [{
+                    dataField: 'name'
+                }, {
+                    itemType: 'tabbed',
+                    tabs: [{
+                        title: 'title1',
+                        items: [{
+                            dataField: 'lastName'
+                        }]
+                    }]
+                }]
+            }]
+        }).dxForm('instance');
+
+        form.beginUpdate();
+
+        if(useItemOption) {
+            form.itemOption('group1.name', 'validationRules', [{ type: 'required', message: 'Name is required' }]);
+            form.itemOption('group1.title1.lastName', 'validationRules', [{ type: 'required', message: 'Last Name is required' }]);
+        } else {
+            form.option('items[0].items[0].validationRules', [{ type: 'required', message: 'Name is required' }]);
+            form.option('items[0].items[1].tabs[0].items[0].validationRules', [{ type: 'required', message: 'Last Name is required' }]);
+        }
+
+        form.endUpdate();
+        form.validate();
+
+        const $summaryItemContents = $('.dx-validationsummary-item-content');
+        assert.equal($summaryItemContents.length, 2, 'validation summary items count');
+        assert.equal($summaryItemContents.eq(0).text(), 'Name is required', 'text of the first summary item');
+        assert.equal($summaryItemContents.eq(1).text(), 'Last Name is required', 'text of the second summary item');
+    });
 });
 
 QUnit.test('Changing the item\'s option via the itemOption when these options are set as object without re-render form', function(assert) {