Form: Fix form validation error when items are cleared (T1233487)

packages/devextreme/js/__internal/ui/form/m_form.ts

@@ -264,7 +264,7 @@ const Form = Widget.inherit({
 
   _initMarkup() {
     // @ts-expect-error
-    ValidationEngine.addGroup(this._getValidationGroup());
+    ValidationEngine.addGroup(this._getValidationGroup(), true);
     this._clearCachedInstances();
     this._prepareFormData();
     this.$element().addClass(FORM_CLASS);
@@ -879,7 +879,7 @@ const Form = Widget.inherit({
     const optionName = getOptionNameFromFullName(fullName);
     if (ITEM_OPTIONS_FOR_VALIDATION_UPDATING.includes(optionName)) {
       // @ts-expect-error
-      ValidationEngine.addGroup(this._getValidationGroup());
+      ValidationEngine.addGroup(this._getValidationGroup(), true);
       if (this.option('showValidationSummary')) {
         this._validationSummary?.refreshValidationGroup();
       }

packages/devextreme/js/__internal/ui/m_validation_engine.ts

@@ -344,6 +344,7 @@ const GroupConfig = Class.inherit({
   ctor(group) {
     this.group = group;
     this.validators = [];
+    this.isRemovable = false;
     this._pendingValidators = [];
     this._onValidatorStatusChanged = this._onValidatorStatusChanged.bind(this);
     this._resetValidationInfo();
@@ -562,10 +563,11 @@ const ValidationEngine = {
     this.addGroup();
   },
 
-  addGroup(group) {
+  addGroup(group, isRemovable) {
     let config = this.getGroupConfig(group);
     if (!config) {
       config = new GroupConfig(group);
+      config.isRemovable = isRemovable;
       this.groups.push(config);
     }
     return config;
@@ -778,22 +780,21 @@ const ValidationEngine = {
   },
 
   registerValidatorInGroup(group, validator) {
-    const groupConfig = ValidationEngine.addGroup(group);
+    const groupConfig = ValidationEngine.addGroup(group, false);
     groupConfig.registerValidator.call(groupConfig, validator);
   },
 
-  _shouldRemoveGroup(group, validatorsInGroup) {
+  _shouldRemoveGroup(group, validators, isRemovable) {
     const isDefaultGroup = group === undefined;
-    const isValidationGroupInstance = group && group.NAME === 'dxValidationGroup';
-    return !isDefaultGroup && !isValidationGroupInstance && !validatorsInGroup.length;
+    return !isDefaultGroup && !validators.length && !isRemovable;
   },
 
   removeRegisteredValidator(group, validator) {
     const config = ValidationEngine.getGroupConfig(group);
     if (config) {
       config.removeRegisteredValidator.call(config, validator);
-      const validatorsInGroup = config.validators;
-      if (this._shouldRemoveGroup(group, validatorsInGroup)) {
+      const { validators, isRemovable } = config;
+      if (this._shouldRemoveGroup(group, validators, isRemovable)) {
         this.removeGroup(group);
       }
     }

packages/devextreme/js/__internal/ui/m_validation_group.ts

@@ -19,7 +19,7 @@ class ValidationGroup extends DOMComponent {
   _init() {
     // @ts-expect-error
     super._init();
-    ValidationEngine.addGroup(this);
+    ValidationEngine.addGroup(this, false);
   }
 
   _initMarkup() {

packages/devextreme/js/__internal/ui/m_validation_summary.ts

@@ -37,7 +37,7 @@ const ValidationSummary = CollectionWidget.inherit({
     const $element = this.$element();
     const group = this.option('validationGroup')
             || ValidationEngine.findGroup($element, this._modelByElement($element));
-    const groupConfig = ValidationEngine.addGroup(group);
+    const groupConfig = ValidationEngine.addGroup(group, false);
 
     this._unsubscribeGroup();
 

packages/devextreme/testing/tests/DevExpress.ui.widgets.form/form.validationRules.tests.js

@@ -475,6 +475,62 @@ QUnit.test('Changing an validationRules options of an any item does not invalida
     assert.strictEqual(renderComponentSpy.callCount, 0, 'renderComponentSpy.callCount');
 });
 
+[false, true].forEach(hasValidationGroup => {
+    QUnit.test(`form ${hasValidationGroup ? 'with' : 'without'} validation group should validate without errors (T1233487)`, function(assert) {
+        const form = $('#form').dxForm({
+            validationGroup: hasValidationGroup ? 'test' : undefined,
+            formData: {
+                firstName: 'Kyle',
+            },
+            items: [{
+                itemType: 'group',
+                items: [{
+                    dataField: 'firstName',
+                    validationRules: [{ type: 'required' }]
+                }],
+            }],
+        }).dxForm('instance');
+
+        form.option('items[0].items', []);
+
+        try {
+            form.validate();
+            assert.ok(true);
+        } catch(e) {
+            assert.ok(false, 'error is thrown');
+        }
+    });
+});
+
+QUnit.test('validation group should not be removed after its validators are removed (T1233487)', function(assert) {
+    const $formContainer = $('#form').dxForm({
+        validationGroup: 'Test',
+        formData: {
+            firstName: 'Kyle',
+        },
+        items: [{
+            itemType: 'group',
+            items: [{
+                dataField: 'firstName',
+                validationRules: [{ type: 'required' }]
+            }],
+        }],
+    });
+    const form = $formContainer.dxForm('instance');
+
+    let $validator = $formContainer.find(`.${VALIDATOR_CLASS}`);
+    const validator = $validator.dxValidator('instance');
+
+    assert.equal(validator.option('validationGroup'), 'Test', 'validation group of the validator');
+    assert.equal($validator.length, 1, 'validators count');
+
+    form.option('items[0].items[0]', 'validationRules', []);
+    $validator = $formContainer.find(`.${VALIDATOR_CLASS}`);
+
+    assert.equal(validator.option('validationGroup'), 'Test', 'validation group should not be removed');
+    assert.equal($validator.length, 0, 'validators count');
+});
+
 QUnit.test('Validate the form without validation rules for an any simple items', function(assert) {
     const errorStub = sinon.stub();
     logger.error = errorStub;