fix(grid): handle validation for fields with '.'

Author: MonikaKirkova

projects/igniteui-angular/src/lib/grids/cell.component.html

@@ -226,37 +226,37 @@
 }
 
 <ng-template #defaultError>
-    @if (formGroup?.get(column?.field).errors?.['required']) {
+    @if (formGroup?.get(getTransformedFieldName(column?.field)).errors?.['required']) {
         <div>
             {{grid.resourceStrings.igx_grid_required_validation_error}}
         </div>
     }
-    @if (formGroup?.get(column?.field).errors?.['minlength']) {
+    @if (formGroup?.get(getTransformedFieldName(column?.field)).errors?.['minlength']) {
         <div>
-            {{grid.resourceStrings.igx_grid_min_length_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.minlength.requiredLength }}
+            {{grid.resourceStrings.igx_grid_min_length_validation_error | igxStringReplace:'{0}':formGroup.get(getTransformedFieldName(column.field)).errors.minlength.requiredLength }}
         </div>
     }
-    @if (formGroup?.get(column?.field).errors?.['maxlength']) {
+    @if (formGroup?.get(getTransformedFieldName(column?.field)).errors?.['maxlength']) {
         <div>
-            {{grid.resourceStrings.igx_grid_max_length_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.maxlength.requiredLength }}
+            {{grid.resourceStrings.igx_grid_max_length_validation_error | igxStringReplace:'{0}':formGroup.get(getTransformedFieldName(column.field)).errors.maxlength.requiredLength }}
         </div>
     }
-    @if (formGroup?.get(column?.field).errors?.['min']) {
+    @if (formGroup?.get(getTransformedFieldName(column?.field)).errors?.['min']) {
         <div>
-            {{grid.resourceStrings.igx_grid_min_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.min.min }}
+            {{grid.resourceStrings.igx_grid_min_validation_error | igxStringReplace:'{0}':formGroup.get(getTransformedFieldName(column.field)).errors.min.min }}
         </div>
     }
-    @if (formGroup?.get(column?.field).errors?.['max']) {
+    @if (formGroup?.get(getTransformedFieldName(column?.field)).errors?.['max']) {
         <div>
-            {{grid.resourceStrings.igx_grid_max_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.max.max }}
+            {{grid.resourceStrings.igx_grid_max_validation_error | igxStringReplace:'{0}':formGroup.get(getTransformedFieldName(column.field)).errors.max.max }}
         </div>
     }
-    @if (formGroup?.get(column?.field).errors?.['email']) {
+    @if (formGroup?.get(getTransformedFieldName(column?.field)).errors?.['email']) {
         <div>
             {{grid.resourceStrings.igx_grid_email_validation_error }}
         </div>
     }
-    @if (formGroup?.get(column?.field).errors?.['pattern']) {
+    @if (formGroup?.get(getTransformedFieldName(column?.field)).errors?.['pattern']) {
         <div>
             {{grid.resourceStrings.igx_grid_pattern_validation_error}}
         </div>

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

@@ -538,7 +538,8 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy, CellT
     @HostBinding('class.igx-grid__td--invalid')
     @HostBinding('attr.aria-invalid')
     public get isInvalid() {
-        const isInvalid = this.formGroup?.get(this.column?.field)?.invalid && this.formGroup?.get(this.column?.field)?.touched;
+        const fieldName = this.getTransformedFieldName(this.column?.field);
+        const isInvalid = this.formGroup?.get(fieldName)?.invalid && this.formGroup?.get(fieldName)?.touched;
         return !this.intRow.deleted && isInvalid;
     }
 
@@ -548,7 +549,8 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy, CellT
      */
     @HostBinding('class.igx-grid__td--valid')
     public get isValidAfterEdit() {
-        const formControl = this.formGroup?.get(this.column?.field);
+        const fieldName = this.getTransformedFieldName(this.column?.field);
+        const formControl = this.formGroup?.get(fieldName);
         return this.editMode && formControl && !formControl.invalid && formControl.dirty;
     }
 
@@ -1175,6 +1177,14 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy, CellT
         return meta;
     }
 
+    /**
+     * @hidden
+     * @internal
+     */
+    public getTransformedFieldName(field: string): string {
+        return field?.replace(/\./g, '_');
+    }
+
     /**
      * @hidden
      * @internal

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

@@ -171,6 +171,25 @@ describe('IgxGrid - Validation #grid', () => {
             expect(erorrMessage).toEqual(' Entry should be at least 4 character(s) long ');
         });
 
+        it('should mark invalid cell with igx-grid__td--invalid class and show the related error cell template when the field contains "."', () => {
+            const grid = fixture.componentInstance.grid as IgxGridComponent;
+            // add new column
+            fixture.componentInstance.columns.push({ field: 'New.Column', dataType: 'string' });
+            fixture.detectChanges();
+            expect(grid.columns.length).toBe(5);
+
+            let cell = grid.gridAPI.get_cell_by_visible_index(1, 4);
+            UIInteractions.simulateDoubleClickAndSelectEvent(cell.element);
+            cell.update('asd');
+            fixture.detectChanges();
+
+            cell = grid.gridAPI.get_cell_by_visible_index(1, 4);
+            //min length should be 4
+            GridFunctions.verifyCellValid(cell, false);
+            const erorrMessage = cell.errorTooltip.first.elementRef.nativeElement.children[0].textContent;
+            expect(erorrMessage).toEqual(' Entry should be at least 4 character(s) long ');
+        });
+
         it('should show the error message on error icon hover and when the invalid cell becomes active.', fakeAsync(() => {
             const grid = fixture.componentInstance.grid as IgxGridComponent;