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

Author: hanastasov

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

@@ -226,37 +226,38 @@
 }
 
 <ng-template #defaultError>
-    @if (formGroup?.get(getTransformedFieldName(column?.field)).errors?.['required']) {
+    @let errors = formControl.errors;
+    @if (errors?.['required']) {
         <div>
             {{grid.resourceStrings.igx_grid_required_validation_error}}
         </div>
     }
-    @if (formGroup?.get(getTransformedFieldName(column?.field)).errors?.['minlength']) {
+    @if (errors?.['minlength']) {
         <div>
-            {{grid.resourceStrings.igx_grid_min_length_validation_error | igxStringReplace:'{0}':formGroup.get(getTransformedFieldName(column.field)).errors.minlength.requiredLength }}
+            {{grid.resourceStrings.igx_grid_min_length_validation_error | igxStringReplace:'{0}':errors.minlength.requiredLength }}
         </div>
     }
-    @if (formGroup?.get(getTransformedFieldName(column?.field)).errors?.['maxlength']) {
+    @if (errors?.['maxlength']) {
         <div>
-            {{grid.resourceStrings.igx_grid_max_length_validation_error | igxStringReplace:'{0}':formGroup.get(getTransformedFieldName(column.field)).errors.maxlength.requiredLength }}
+            {{grid.resourceStrings.igx_grid_max_length_validation_error | igxStringReplace:'{0}':errors.maxlength.requiredLength }}
         </div>
     }
-    @if (formGroup?.get(getTransformedFieldName(column?.field)).errors?.['min']) {
+    @if (errors?.['min']) {
         <div>
-            {{grid.resourceStrings.igx_grid_min_validation_error | igxStringReplace:'{0}':formGroup.get(getTransformedFieldName(column.field)).errors.min.min }}
+            {{grid.resourceStrings.igx_grid_min_validation_error | igxStringReplace:'{0}':errors.min.min }}
         </div>
     }
-    @if (formGroup?.get(getTransformedFieldName(column?.field)).errors?.['max']) {
+    @if (errors?.['max']) {
         <div>
-            {{grid.resourceStrings.igx_grid_max_validation_error | igxStringReplace:'{0}':formGroup.get(getTransformedFieldName(column.field)).errors.max.max }}
+            {{grid.resourceStrings.igx_grid_max_validation_error | igxStringReplace:'{0}':errors.max.max }}
         </div>
     }
-    @if (formGroup?.get(getTransformedFieldName(column?.field)).errors?.['email']) {
+    @if (errors?.['email']) {
         <div>
             {{grid.resourceStrings.igx_grid_email_validation_error }}
         </div>
     }
-    @if (formGroup?.get(getTransformedFieldName(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,9 +538,11 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy, CellT
     @HostBinding('class.igx-grid__td--invalid')
     @HostBinding('attr.aria-invalid')
     public get isInvalid() {
-        const fieldName = this.getTransformedFieldName(this.column?.field);
-        const isInvalid = this.formGroup?.get(fieldName)?.invalid && this.formGroup?.get(fieldName)?.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;
     }
 
     /**
@@ -549,9 +551,11 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy, CellT
      */
     @HostBinding('class.igx-grid__td--valid')
     public get isValidAfterEdit() {
-        const fieldName = this.getTransformedFieldName(this.column?.field);
-        const formControl = this.formGroup?.get(fieldName);
-        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,10 +59,9 @@ 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);
     }
 
@@ -74,6 +73,17 @@ export class IgxGridValidationService {
         const parts = path?.split('.') ?? [];
         return parts.join('_');
     }
+    
+    /**
+     * @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 getFormControlPath(path: string): (string)[] {
+        return [path];
+    }
 
     /**
      * @hidden
@@ -89,8 +99,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 +111,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 +136,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 +164,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 +200,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();
         }
     }