Grid Validation Implementation

CHANGELOG.md

@@ -71,7 +71,7 @@ All notable changes for each version of this project will be documented in this
 
 - Added the `IgcFormControl` directive that, when imported with its `IgcFormsModule`, is designed to seamlessly attach to form components from the Ignite UI for WebComponents package and allows using them in Angular templates and reactive forms with support for `ngModel` and `formControlName` directives. Currently the only Web Component with support through the directive is `igc-rating`.
 
-    - Added reactive forms style validation for grid editing. This extends the [Angular's reactive forms](https://angular.io/guide/form-validation#validating-input-in-reactive-forms) validation functionality
+    - Added built-in validation mechanism for Grid Editing. Extends the [Angular Form validation](https://angular.io/guide/form-validation) functionality
     You can configure it in 2 ways:
         1. Via template-driven configuration on the `igx-column` of the grid:
         ```html
@@ -91,7 +91,7 @@ All notable changes for each version of this project will be documented in this
         }
         ```
 
-    Edited cells wil enter an invalid state when validation fails and will be show an error icon and message. Cell will remain invalid until the value is edited to a valid value or the related transaction in the transaction service are commited or cleared.
+    Edited cells wil enter an invalid state when validation fails and will show an error icon and message. Cell will remain invalid until the value is edited to a valid value or the related state in the validation service is cleared.
 
     You can refer to the documentation for more details: https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/validation
 

projects/igniteui-angular/src/lib/grids/api.service.ts

@@ -5,7 +5,7 @@ import { DataUtil, GridColumnDataType } from '../data-operations/data-util';
 import { IFilteringExpressionsTree } from '../data-operations/filtering-expressions-tree';
 import { Transaction, TransactionType, State } from '../services/transaction/transaction';
 import { IgxCell, IgxGridCRUDService, IgxEditRow } from './common/crud.service';
-import { CellType, ColumnType, GridServiceType, GridType, IFieldValid, RowType } from './common/grid.interface';
+import { CellType, ColumnType, GridServiceType, GridType, RowType } from './common/grid.interface';
 import { IGridEditEventArgs, IRowToggleEventArgs } from './common/events';
 import { IgxColumnMovingService } from './moving/moving.service';
 import { IGroupingExpression } from '../data-operations/grouping-expression.interface';
@@ -294,19 +294,19 @@ export class GridBaseAPIService<T extends GridType> implements GridServiceType {
         return this.grid.filteredData;
     }
 
-    public addRowToData(rowData: any, _parentID?: any, validity?) {
+    public addRowToData(rowData: any, _parentID?: any) {
         // Add row goes to transactions and if rowEditable is properly implemented, added rows will go to pending transactions
         // If there is a row in edit - > commit and close
         const grid = this.grid;
-        const transactionId = grid.primaryKey ? rowData[grid.primaryKey] : rowData;
+        const rowId = grid.primaryKey ? rowData[grid.primaryKey] : rowData;
         if (grid.transactions.enabled) {
-            const transaction: Transaction = { id: transactionId, type: TransactionType.ADD, newValue: rowData };
+            const transaction: Transaction = { id: rowId, type: TransactionType.ADD, newValue: rowData };
             grid.transactions.add(transaction);
         } else {
             grid.data.push(rowData);
         }
-        grid.validation.markAsTouched(transactionId);
-        grid.validation.update(transactionId, rowData);
+        grid.validation.markAsTouched(rowId);
+        grid.validation.update(rowId, rowData);
     }
 
     public deleteRowFromData(rowID: any, index: number) {
@@ -553,12 +553,12 @@ export class GridBaseAPIService<T extends GridType> implements GridServiceType {
      * @param rowNewValue New value of the row
      */
     protected updateData(grid, rowID, rowValueInDataSource: any, rowCurrentValue: any, rowNewValue: { [x: string]: any }) {
-        const transaction: Transaction = {
-            id: rowID,
-            type: TransactionType.UPDATE,
-            newValue: rowNewValue
-        };
         if (grid.transactions.enabled) {
+            const transaction: Transaction = {
+                id: rowID,
+                type: TransactionType.UPDATE,
+                newValue: rowNewValue
+            };
             grid.transactions.add(transaction, rowCurrentValue);
         } else {
             mergeObjects(rowValueInDataSource, rowNewValue);

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

@@ -1,11 +1,21 @@
 <ng-template #defaultPinnedIndicator>
-    <igx-chip *ngIf="displayPinnedChip" class="igx-grid__td--pinned-chip" [disabled]="true"
-        [displayDensity]="'compact'">{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip>
+    <igx-chip
+        *ngIf="displayPinnedChip"
+        class="igx-grid__td--pinned-chip"
+        [disabled]="true"
+        [displayDensity]="'compact'"
+        >{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip
+    >
 </ng-template>
 <ng-template #defaultCell>
-    <div *ngIf="column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)" igxTextHighlight
-        class="igx-grid__td-text" style="pointer-events: none;" [cssClass]="highlightClass"
-        [activeCssClass]="activeHighlightClass" [groupName]="gridID" [value]="
+    <div *ngIf="column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)"
+        igxTextHighlight
+        class="igx-grid__td-text"
+        style="pointer-events: none;"
+        [cssClass]="highlightClass"
+        [activeCssClass]="activeHighlightClass"
+        [groupName]="gridID"
+        [value]="
             formatter
                 ? (value | columnFormatter:formatter:rowData:columnData)
                 : column.dataType === 'number'
@@ -17,34 +27,47 @@
                 : column.dataType === 'percent'
                 ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)
                 : value
-        " [row]="rowData" [column]="this.column.field" [containerClass]="'igx-grid__td-text'"
-        [metadata]="searchMetadata">{{
-        formatter
-        ? (value | columnFormatter:formatter:rowData:columnData)
-        : column.dataType === "number"
-        ? (value | number:column.pipeArgs.digitsInfo:grid.locale)
-        : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')
-        ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)
-        : column.dataType === 'currency'
-        ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)
-        : column.dataType === 'percent'
-        ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)
-        : value
+        "
+        [row]="rowData"
+        [column]="this.column.field"
+        [containerClass]="'igx-grid__td-text'"
+        [metadata]="searchMetadata"
+    >{{
+            formatter
+                ? (value | columnFormatter:formatter:rowData:columnData)
+                : column.dataType === "number"
+                ? (value | number:column.pipeArgs.digitsInfo:grid.locale)
+                : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')
+                ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)
+                : column.dataType === 'currency'
+                ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)
+                : column.dataType === 'percent'
+                ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)
+                : value
         }}</div>
-    <igx-icon *ngIf="column.dataType === 'boolean' && !this.formatter"
-        [ngClass]="{ 'igx-icon--success': value, 'igx-icon--error': !value }">{{ value ? "check" : "close" }}</igx-icon>
+    <igx-icon
+        *ngIf="column.dataType === 'boolean' && !this.formatter"
+        [ngClass]="{ 'igx-icon--success': value, 'igx-icon--error': !value }"
+        >{{ value ? "check" : "close" }}</igx-icon
+    >
 </ng-template>
 <ng-template #addRowCell let-cell="cell">
-    <div *ngIf="column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)" igxTextHighlight
-        class="igx-grid__td-text" style="pointer-events: none" [cssClass]="highlightClass"
-        [activeCssClass]="activeHighlightClass" [groupName]="gridID" [value]="formatter ? (value | columnFormatter:formatter:rowData) : column.dataType === 'number' ?
+    <div *ngIf="column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)"
+        igxTextHighlight class="igx-grid__td-text" style="pointer-events: none"
+    [cssClass]="highlightClass"
+    [activeCssClass]="activeHighlightClass"
+    [groupName]="gridID"
+    [value]="formatter ? (value | columnFormatter:formatter:rowData) : column.dataType === 'number' ?
         (value | number:column.pipeArgs.digitsInfo:grid.locale) : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime') ?
         (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale) : column.dataType === 'currency' ?
         (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'percent' ?
-        (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value" [row]="rowData" [column]="this.column.field"
-        [containerClass]="'igx-grid__td-text'" [metadata]="searchMetadata">{{
+        (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value"
+    [row]="rowData"
+    [column]="this.column.field"
+    [containerClass]="'igx-grid__td-text'"
+    [metadata]="searchMetadata">{{
         !isEmptyAddRowCell ? value : (column.header || column.field)
-        }}</div>
+    }}</div>
 </ng-template>
 <ng-template #inlineEditor let-cell="cell">
     <ng-container *ngIf="column.dataType === 'string'" [formGroup]="formGroup">
@@ -61,13 +84,23 @@
     </ng-container>
     <ng-container *ngIf="column.dataType === 'number'">
         <igx-input-group displayDensity="compact" [formGroup]="formGroup">
-            <input igxInput [attr.aria-errormessage]="ariaErrorMessage" [igxFocus]="true" [step]="step" type="number"
-            [formControl]="formControl" />
+            <input
+                igxInput
+                [attr.aria-errormessage]="ariaErrorMessage"
+                [igxFocus]="true"
+                [step]="step"
+                type="number"
+                [formControl]="formControl" 
+            />
         </igx-input-group>
     </ng-container>
     <ng-container *ngIf="column.dataType === 'boolean'" [formGroup]="formGroup">
-        <igx-checkbox [checked]="editValue" (change)="editValue = $event.checked" [igxFocus]="true"
-            [disableRipple]="true" [formControl]="formControl"></igx-checkbox>
+        <igx-checkbox
+            [checked]="editValue"
+            [igxFocus]="true"
+            [disableRipple]="true"
+            [formControl]="formControl"
+        ></igx-checkbox>
     </ng-container>
     <ng-container *ngIf="column.dataType === 'date'" [formGroup]="formGroup">
         <igx-date-picker
@@ -83,40 +116,65 @@
         </igx-date-picker>
     </ng-container>
     <ng-container *ngIf="column.dataType === 'time'" [formGroup]="formGroup">
-        <igx-time-picker [style.width.%]="100" [outlet]="grid.outlet" mode="dropdown" [locale]="grid.locale"
-            [inputFormat]="column.defaultTimeFormat" [(value)]="editValue" [igxFocus]="true"
-            [formControl]="formControl">
-        </igx-time-picker>
+        <igx-time-picker
+            [style.width.%]="100"
+            [outlet]="grid.outlet"
+            mode="dropdown"
+            [locale]="grid.locale"
+            [inputFormat]="column.defaultTimeFormat"
+            [(value)]="editValue"
+            [igxFocus]="true"
+            [formControl]="formControl"
+        ></igx-time-picker>
     </ng-container>
     <ng-container *ngIf="column.dataType === 'dateTime'">
         <igx-input-group [formGroup]="formGroup">
-            <input type="text" [attr.aria-errormessage]="ariaErrorMessage" [formControl]="formControl" igxInput
-                [igxDateTimeEditor]="column.defaultDateTimeFormat"  [igxFocus]="true" />
+            <input
+                type="text"
+                [attr.aria-errormessage]="ariaErrorMessage"
+                [formControl]="formControl"
+                igxInput
+                [igxDateTimeEditor]="column.defaultDateTimeFormat" 
+                [igxFocus]="true"
+            />
         </igx-input-group>
     </ng-container>
     <ng-container *ngIf="column.dataType === 'currency'">
         <igx-input-group displayDensity="compact" [formGroup]="formGroup">
             <igx-prefix *ngIf="grid.currencyPositionLeft">{{ currencyCodeSymbol }}</igx-prefix>
-            <input igxInput [attr.aria-errormessage]="ariaErrorMessage" [igxFocus]="true" [step]="step" type="number"
-            [formControl]="formControl" />
+            <input
+                igxInput
+                [attr.aria-errormessage]="ariaErrorMessage"
+                [igxFocus]="true"
+                [step]="step"
+                type="number"
+                [formControl]="formControl"
+            />
             <igx-suffix *ngIf="!grid.currencyPositionLeft">{{ currencyCodeSymbol }}</igx-suffix>
         </igx-input-group>
     </ng-container>
     <ng-container *ngIf="column.dataType === 'percent'">
         <igx-input-group displayDensity="compact" [formGroup]="formGroup">
-            <input igxInput [attr.aria-errormessage]="ariaErrorMessage" [igxFocus]="true" [step]="step" type="number"
-            [formControl]="formControl" />
+            <input
+                igxInput
+                [attr.aria-errormessage]="ariaErrorMessage"
+                [igxFocus]="true"
+                [step]="step"
+                type="number"
+                [formControl]="formControl"
+            />
             <igx-suffix> {{ editValue | percent:column.pipeArgs.digitsInfo:grid.locale }} </igx-suffix>
         </igx-input-group>
     </ng-container>
 </ng-template>
 <ng-container *ngTemplateOutlet="pinnedIndicatorTemplate; context: context">
 </ng-container>
 <ng-container *ngTemplateOutlet="template; context: context"></ng-container>
+
 <ng-container *ngIf="isInvalid">
     <igx-icon #errorIcon [igxTooltipTarget]="tooltipRef" 
     (mouseover)='errorShowing = true' (mouseout)='errorShowing = false'>error</igx-icon>
-    <div [id]="describeBy"
+    <div [id]="ariaErrorMessage"
     igxTooltip #error #tooltipRef="tooltip">
         <div [style.width]="'max-content'">
             <ng-container *ngTemplateOutlet="cellValidationErrorTemplate || defaultError; context: context"></ng-container>
@@ -146,4 +204,4 @@
     <div *ngIf="formGroup?.get(column?.field).errors?.['pattern']">
         {{grid.resourceStrings.igx_grid_pattern_validation_error}}
     </div>
-</ng-template>
+</ng-template>