Form: fix for dateRangeBox and validation summary

packages/devextreme/js/ui/date_range_box/ui.date_range_box.js

@@ -1002,6 +1002,18 @@ class DateRangeBox extends Editor {
         this.getStartDateBox().focus();
     }
 
+    reset() {
+        super.reset();
+
+        const startDateBox = this.getStartDateBox();
+        const endDateBox = this.getEndDateBox();
+
+        startDateBox.reset();
+        endDateBox.reset();
+        startDateBox._updateInternalValidationState(true);
+        endDateBox._updateInternalValidationState(true);
+    }
+
     clear() {
         super.clear();
 

packages/devextreme/js/ui/form/ui.form.js

@@ -1152,7 +1152,7 @@ const Form = Widget.inherit({
         this.option('isDirty', !!this._dirtyFields.size);
     },
 
-    _doForAllEditors: function(editorAction) {
+    updateRunTimeInfoForEachEditor: function(editorAction) {
         this._itemsRunTimeInfo.each(function(_, itemRunTimeInfo) {
             const widgetInstance = itemRunTimeInfo.widgetInstance;
             if(isDefined(widgetInstance) && Editor.isEditor(widgetInstance)) {
@@ -1162,7 +1162,7 @@ const Form = Widget.inherit({
     },
 
     _clear: function() {
-        this._doForAllEditors(editor => {
+        this.updateRunTimeInfoForEachEditor(editor => {
             editor.clear();
             editor.option('isValid', true);
         });
@@ -1222,7 +1222,7 @@ const Form = Widget.inherit({
     },
 
     reset: function(editorsData) {
-        this._doForAllEditors(editor => {
+        this.updateRunTimeInfoForEachEditor(editor => {
             const editorName = editor.option('name');
             if(editorsData && editorName in editorsData) {
                 editor.reset(editorsData[editorName]);
@@ -1231,7 +1231,7 @@ const Form = Widget.inherit({
             }
         });
 
-        this._clearValidationSummary();
+        this._renderValidationSummary();
     },
 
     updateData: function(data, value) {

packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/dateRangeBox.tests.js

@@ -2594,6 +2594,44 @@ QUnit.module('Validation', {
         assert.strictEqual(this.instance.option('isValid'), false, 'validation is failed');
     });
 
+    QUnit.test('reset should clear validation', function(assert) {
+        this.reinit({ value: [null, null] });
+
+        this.$element.dxValidator({
+            validationRules: [{
+                type: 'required',
+                message: 'Both dates are required'
+            }]
+        });
+
+        const startDateBox = getStartDateBoxInstance(this.instance);
+        const keyboard = keyboardMock($(startDateBox.field()));
+
+        this.failInternalValidation(keyboard);
+
+        this.instance.reset();
+
+        assert.strictEqual(this.instance.option('isValid'), true);
+    });
+
+    QUnit.test('reset should clear input value when editor`s value hasn`t been changed', function(assert) {
+        const initialValue = [null, null];
+        this.reinit({ value: initialValue });
+
+        const startDateBox = getStartDateBoxInstance(this.instance);
+        const $startDateBoxInput = $(startDateBox.field());
+
+        const keyboard = keyboardMock($startDateBoxInput);
+        keyboard.type('123').press('enter');
+
+        assert.strictEqual($startDateBoxInput.val(), '123');
+        assert.deepEqual(this.instance.option('value'), initialValue);
+
+        this.instance.reset();
+
+        assert.strictEqual($startDateBoxInput.val(), '');
+    });
+
     QUnit.test('dateRangeBox should not be re-validated after readOnly option change', function(assert) {
         this.$element.dxValidator({
             validationRules: [{

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

@@ -4699,4 +4699,25 @@ QUnit.module('reset', () => {
 
         assert.strictEqual(validationItemsAfterReset.length, 0, 'form does not have validation summary items after reset');
     });
+
+    QUnit.test('validation summary should appear after validating reset form', function(assert) {
+        const form = $('#form').dxForm({
+            formData: { field1: '' },
+            showValidationSummary: true,
+            items: [ {
+                dataField: 'field1',
+                validationRules: [{ type: 'required' }]
+            }, {
+                dataField: 'field2',
+                validationRules: [{ type: 'required' }]
+            } ]
+        }).dxForm('instance');
+
+        form.reset();
+        form.validate();
+
+        const summaryItemsAfterValidate = $(`.${FORM_VALIDATION_SUMMARY}`).children();
+
+        assert.strictEqual(summaryItemsAfterValidate.length, 2, 'form has validation summary after validation');
+    });
 });