igniteui-angular 14.2.3 → 14.2.4

package/fesm2020/igniteui-angular.mjs

@@ -24091,16 +24091,33 @@ class IgxAddRow extends IgxEditRow {
     }
 }
 class IgxCell {
-    constructor(id, rowIndex, column, value, editValue, rowData, grid) {
+    constructor(id, rowIndex, column, value, _editValue, rowData, grid) {
         this.id = id;
         this.rowIndex = rowIndex;
         this.column = column;
         this.value = value;
-        this.editValue = editValue;
+        this._editValue = _editValue;
         this.rowData = rowData;
         this.grid = grid;
         this.grid.validation.create(id.rowID, rowData);
     }
+    get editValue() {
+        const formControl = this.grid.validation.getFormControl(this.id.rowID, this.column.field);
+        if (formControl) {
+            return formControl.value;
+        }
+    }
+    set editValue(value) {
+        const formControl = this.grid.validation.getFormControl(this.id.rowID, this.column.field);
+        if (this.grid.validationTrigger === 'change') {
+            // in case trigger is change, mark as touched.
+            formControl.setValue(value);
+            formControl.markAsTouched();
+        }
+        else {
+            this.pendingValue = value;
+        }
+    }
     castToNumber(value) {
         if (this.column.dataType === 'number' && !this.column.inlineEditorTemplate) {
             const v = parseFloat(value);
@@ -24185,6 +24202,12 @@ class IgxCellCrudState {
         if (!this.cell) {
             return;
         }
+        const formControl = this.grid.validation.getFormControl(this.cell.id.rowID, this.cell.column.field);
+        if (this.grid.validationTrigger === 'blur' && this.cell.pendingValue !== undefined) {
+            // in case trigger is blur, update value if there's a pending one and mark as touched.
+            formControl.setValue(this.cell.pendingValue);
+            formControl.markAsTouched();
+        }
         if (this.grid.validationTrigger === 'blur') {
             this.grid.tbody.nativeElement.focus({ preventScroll: true });
         }
@@ -24572,11 +24595,11 @@ class IgxGridCRUDService extends IgxRowAddCrudState {
             }
         }
         else {
+            this.exitCellEdit(event);
             if (!this.grid.rowEditable && this.cell) {
                 const value = this.grid.transactions.getAggregatedValue(this.cell.id.rowID, true) || this.cell.rowData;
                 this.grid.validation.update(this.cell.id.rowID, value);
             }
-            this.exitCellEdit(event);
         }
         args = this.updateRow(commit, event);
         this.rowEditingBlocked = args.cancel;
@@ -59583,6 +59606,7 @@ 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);
             }
@@ -64123,6 +64147,8 @@ class IgxGridBaseDirective extends DisplayDensityBase {
                     rowIndex: index
                 };
                 const cell = new IgxCell(id, index, col, rowData[col.field], value, rowData, this);
+                const formControl = this.validation.getFormControl(cell.id.rowID, cell.column.field);
+                formControl.setValue(value);
                 this.gridAPI.update_cell(cell);
                 this.cdr.detectChanges();
             }
@@ -68885,11 +68911,11 @@ class IgxGridCellComponent {
      */
     ngOnChanges(changes) {
         if (changes.editMode && changes.editMode.currentValue && this.formControl) {
-            // while in edit mode subscribe to value changes on the current form control and set to editValue
+            // ensure when values change, form control is forced to be marked as touche.
             this.formControl.valueChanges.pipe(takeWhile(x => this.editMode)).subscribe(value => {
-                this.editValue = value;
                 this.formControl.markAsTouched();
             });
+            // while in edit mode subscribe to value changes on the current form control and set to editValue
             this.formControl.statusChanges.pipe(takeWhile(x => this.editMode)).subscribe(status => {
                 if (status === 'INVALID' && this.errorTooltip.length > 0) {
                     this.cdr.detectChanges();
@@ -68958,7 +68984,6 @@ class IgxGridCellComponent {
             cell = this.grid.crudService.createCell(this);
         }
         cell.editValue = val;
-        this.formControl.setValue(val);
         this.grid.gridAPI.update_cell(cell);
         this.grid.crudService.endCellEdit();
         this.cdr.markForCheck();
@@ -68999,6 +69024,7 @@ class IgxGridCellComponent {
         this.grid.navigation.setActiveNode({ row: this.rowIndex, column: this.visibleColumnIndex });
         const isTargetErrorIcon = event && event.target && event.target === this.errorIcon?.el.nativeElement;
         if (this.isInvalid && !isTargetErrorIcon) {
+            this.cdr.detectChanges();
             this.openErrorTooltip();
             this.grid.activeNodeChange.pipe(first$1()).subscribe(() => {
                 this.closeErrorTooltip();