Handle validation for fields with '.' - 19.2.x (#16053)

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

* chore(*): fix failing test

* fix(grid): use column field names as names for the ngControls

* chore(*): remove not needed comments

* chore(*): explicitly return false if formGroup does not exist

* Update grid-validation.service.ts

---------

Co-authored-by: Hristo <[email protected]>

Author: MonikaKirkova

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

@@ -226,37 +226,38 @@
 }
 
 <ng-template #defaultError>
-    @if (formGroup?.get(column?.field).errors?.['required']) {
+    @let errors = formControl.errors;
+    @if (errors?.['required']) {
         <div>
             {{grid.resourceStrings.igx_grid_required_validation_error}}
         </div>
     }
-    @if (formGroup?.get(column?.field).errors?.['minlength']) {
+    @if (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}':errors.minlength.requiredLength }}
         </div>
     }
-    @if (formGroup?.get(column?.field).errors?.['maxlength']) {
+    @if (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}':errors.maxlength.requiredLength }}
         </div>
     }
-    @if (formGroup?.get(column?.field).errors?.['min']) {
+    @if (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}':errors.min.min }}
         </div>
     }
-    @if (formGroup?.get(column?.field).errors?.['max']) {
+    @if (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}':errors.max.max }}
         </div>
     }
-    @if (formGroup?.get(column?.field).errors?.['email']) {
+    @if (errors?.['email']) {
         <div>
             {{grid.resourceStrings.igx_grid_email_validation_error }}
         </div>
     }
-    @if (formGroup?.get(column?.field).errors?.['pattern']) {
+    @if (errors?.['pattern']) {
         <div>
             {{grid.resourceStrings.igx_grid_pattern_validation_error}}
         </div>

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

@@ -538,8 +538,11 @@ 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;
-        return !this.intRow.deleted && isInvalid;
+        if (this.formGroup) {
+            const isInvalid = this.grid.validation?.isFieldInvalid(this.formGroup, this.column?.field);
+            return !this.intRow.deleted && isInvalid;
+        }
+        return false;
     }
 
     /**
@@ -548,8 +551,11 @@ 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);
-        return this.editMode && formControl && !formControl.invalid && formControl.dirty;
+        if (this.formGroup) {
+            const isValidAfterEdit = this.grid.validation?.isFieldValidAfterEdit(this.formGroup, this.column?.field);
+            return this.editMode && isValidAfterEdit;
+        }
+        return false;
     }
 
     /**

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

@@ -59,20 +59,21 @@ export class IgxGridValidationService {
     */
     private addFormControl(formGroup: FormGroup, data: any, column: ColumnType) {
         const value = resolveNestedPath(data || {}, columnFieldPath(column.field));
-        const field = this.getFieldKey(column.field);
         const control = new FormControl(value, { updateOn: this.grid.validationTrigger });
         control.addValidators(column.validators);
-        formGroup.addControl(field, control);
+        formGroup.addControl(column.field, control);
         control.setValue(value);
     }
-
+    
     /**
      * @hidden
      * @internal
+     Wraps the provided path into an array. This way FormGroup.get will return proper result.
+     Otherwise, if the path is a string (e.g. 'address.street'), FormGroup.get will treat it as there is a nested structure
+     and will look for control with a name of 'address' which returns undefined.
      */
-    private getFieldKey(path: string) {
-        const parts = path?.split('.') ?? [];
-        return parts.join('_');
+    private getFormControlPath(path: string): (string)[] {
+        return [path];
     }
 
     /**
@@ -89,8 +90,8 @@ export class IgxGridValidationService {
      */
     public getFormControl(rowId: any, columnKey: string) {
         const formControl = this.getFormGroup(rowId);
-        const field = this.getFieldKey(columnKey);
-        return formControl?.get(field);
+        const path = this.getFormControlPath(columnKey);
+        return formControl?.get(path);
     }
 
     /**
@@ -101,6 +102,22 @@ export class IgxGridValidationService {
         this._validityStates.set(rowId, form);
     }
 
+    /**
+     * Checks the validity of the native ngControl
+     */
+    public isFieldInvalid(formGroup: FormGroup, fieldName: string): boolean {
+        const path = this.getFormControlPath(fieldName);
+        return formGroup.get(path)?.invalid && formGroup.get(path)?.touched;
+    }
+
+    /**
+     * Checks the validity of the native ngControl after edit
+     */
+    public isFieldValidAfterEdit(formGroup: FormGroup, fieldName: string): boolean {
+        const path = this.getFormControlPath(fieldName);
+        return !formGroup.get(path)?.invalid && formGroup.get(path)?.dirty;
+    }
+
     /**
      * @hidden
      * @internal
@@ -110,10 +127,10 @@ export class IgxGridValidationService {
         this._validityStates.forEach((formGroup, key) => {
             const state: IFieldValidationState[] = [];
             for (const col of this.grid.columns) {
-                const colKey = this.getFieldKey(col.field);
-                const control = formGroup.get(colKey);
+                const path = this.getFormControlPath(col.field);
+                const control = formGroup.get(path);
                 if (control) {
-                    state.push({ field: colKey, status: control.status as ValidationStatus, errors: control.errors })
+                    state.push({ field: col.field, status: control.status as ValidationStatus, errors: control.errors })
                 }
             }
             states.push({ key: key, status: formGroup.status as ValidationStatus, fields: state, errors: formGroup.errors });
@@ -138,8 +155,8 @@ export class IgxGridValidationService {
         const keys = Object.keys(rowData);
         const rowGroup = this.getFormGroup(rowId);
         for (const key of keys) {
-            const colKey = this.getFieldKey(key);
-            const control = rowGroup?.get(colKey);
+            const path = this.getFormControlPath(key);
+            const control = rowGroup?.get(path);
             if (control && control.value !== rowData[key]) {
                 control.setValue(rowData[key], { emitEvent: false });
             }
@@ -174,8 +191,8 @@ export class IgxGridValidationService {
         rowGroup.markAsTouched();
         const fields = field ? [field] : this.grid.columns.map(x => x.field);
         for (const currField of fields) {
-            const colKey = this.getFieldKey(currField);
-            rowGroup?.get(colKey)?.markAsTouched();
+            const path = this.getFormControlPath(currField);
+            rowGroup?.get(path)?.markAsTouched();
         }
     }
 

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;