fix(grid): In case of external data change sync cell's formControl wi… (#12949)

* fix(grid): In case of external data change sync cell's formControl with new value.

* chore(*): Add detect changes and test.

* Use mark for check instead.

* chore(*): Ensure test does not pollute data objects.

* chore(*): Fix some test scenarios.

* chore(*): A different approach with explicitly updating validity on data change.

* chore(*): Add check in case setter is called before init.

* chore(*): Fix test.

* chore(*): Apply review comments.

* chore(*): Additional small fix.

---------

Co-authored-by: MKirova <MKirova@DEV-MKIROVA>
Co-authored-by: Deyan Kamburov <[email protected]>
Co-authored-by: Stamen Stoychev <[email protected]>

Author: 4 people

projects/igniteui-angular/src/lib/grids/grid/grid-validation.service.ts

@@ -32,9 +32,9 @@ export class IgxGridValidationService {
                 const value = resolveNestedPath(data || {}, col.field);
                 const field = this.getFieldKey(col.field);
                 const control = new FormControl(value, { updateOn: this.grid.validationTrigger });
-                control.setValue(value);
                 control.addValidators(col.validators);
                 formGroup.addControl(field, control);
+                control.setValue(value);
             }
             const args: IGridFormGroupCreatedEventArgs = {
                 formGroup,
@@ -129,14 +129,30 @@ export class IgxGridValidationService {
         for (const key of keys) {
             const colKey = this.getFieldKey(key);
             const control = rowGroup?.get(colKey);
-            if (control) {
+            if (control && control.value !== rowData[key]) {
                 control.setValue(rowData[key], { emitEvent: false });
             }
         }
 
         this.updateStatus();
     }
 
+    /**
+     * @hidden
+     * @internal
+     * Update validity based on new data.
+     */
+    public updateAll(newData: any) {
+        if (!newData || this._validityStates.size === 0) return;
+        for (const rec of newData) {
+            const rowId = rec[this.grid.primaryKey] || rec;
+            if (this.getFormGroup(rowId)) {
+                const recAggregatedData = this.grid.transactions.getAggregatedValue(rowId, true) || rec;
+                this.update(rowId, recAggregatedData);
+            }
+        }
+    }
+
     /** Marks the associated record or field as touched.
      * @param key The id of the record that will be marked as touched.
      * @param field Optional. The field from the record that will be marked as touched. If not provided all fields will be touched.

projects/igniteui-angular/src/lib/grids/grid/grid-validation.spec.ts

@@ -285,6 +285,31 @@ describe('IgxGrid - Validation #grid', () => {
             invalidRecords = grid.validation.getInvalid();
             expect(invalidRecords.length).toEqual(0);
         });
+
+        it('should update formControl state when grid data is updated.', () => {
+            const grid = fixture.componentInstance.grid as IgxGridComponent;
+            const originalDataCopy = JSON.parse(JSON.stringify(grid.data));
+
+            grid.data = JSON.parse(JSON.stringify(grid.data));
+            let cell = grid.gridAPI.get_cell_by_visible_index(1, 1);
+            UIInteractions.simulateDoubleClickAndSelectEvent(cell.element);
+            cell.update('asd');
+            fixture.detectChanges();
+            grid.crudService.endEdit(true);
+            fixture.detectChanges();
+
+            cell = grid.gridAPI.get_cell_by_visible_index(1, 1);
+            //min length should be 4
+            GridFunctions.verifyCellValid(cell, false);
+
+            grid.data = originalDataCopy;
+            fixture.detectChanges();
+
+            cell = grid.gridAPI.get_cell_by_visible_index(1, 1);
+            GridFunctions.verifyCellValid(cell, true);
+            UIInteractions.simulateDoubleClickAndSelectEvent(cell.element);
+            expect(cell.editValue).toBe(originalDataCopy[1].ProductName);
+        });
     });
 
     describe('Custom Validation - ', () => {

projects/igniteui-angular/src/lib/grids/grid/grid.component.ts

@@ -382,6 +382,10 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
         const dataLoaded = (!this._data || this._data.length === 0) && value && value.length > 0;
         this._data = value || [];
         this.summaryService.clearSummaryCache();
+        if (!this._init) {
+            this.validation.updateAll(this._data);
+        }
+
         if (this.shouldGenerate) {
             this.setupColumns();
         }

projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts

@@ -428,6 +428,9 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti
     public set data(value: any[] | null) {
         this._data = value || [];
         this.summaryService.clearSummaryCache();
+        if (!this._init) {
+            this.validation.updateAll(this._data);
+        }
         if (this.shouldGenerate) {
             this.setupColumns();
             this.reflow();

projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.ts

@@ -351,6 +351,9 @@ export class IgxTreeGridComponent extends IgxGridBaseDirective implements GridTy
     public set data(value: any[] | null) {
         this._data = value || [];
         this.summaryService.clearSummaryCache();
+        if (!this._init) {
+            this.validation.updateAll(this._data);
+        }
         if (this.shouldGenerate) {
             this.setupColumns();
         }