Remove some code from the old API. Fix tree grid cross-field cells wi… (#3091)

* Remove some code from the old API. Fix tree grid cross-field cells with select component. Some more issues

* Add missing import in hgrid configuration for live editing

* Add ReactiveFormsModule to ngImports too

* Move the new import to the right sample

Co-authored-by: Deyan Kamburov <dkamburov@users.noreply.github.com>

Author: mddragnev

live-editing/configs/TreeGridConfigGenerator.ts

@@ -33,6 +33,7 @@ import {
     IgxSparklineModule
 } from 'igniteui-angular-charts';
 import { Router, RouterModule } from '@angular/router';
+import { ReactiveFormsModule } from '@angular/forms';
 import { AppModuleConfig, Config, IConfigGenerator } from 'igniteui-live-editing';
 export class TreeGridConfigGenerator implements IConfigGenerator {
     public additionalImports = {
@@ -1168,9 +1169,9 @@ export class TreeGridConfigGenerator implements IConfigGenerator {
             ],
             appModuleConfig: new AppModuleConfig({
                 imports: ['IgxPreventDocumentScrollModule', 'IgxTreeGridModule', 'TreeGridValidatorServiceCrossFieldComponent',
-                    'IgxButtonModule', 'IgxTooltipModule'],
+                    'IgxButtonModule', 'IgxTooltipModule', 'ReactiveFormsModule'],
                 ngDeclarations: ['TreeGridValidatorServiceCrossFieldComponent'],
-                ngImports: ['IgxPreventDocumentScrollModule', 'IgxTreeGridModule', 'IgxButtonModule', 'IgxTooltipModule']
+                ngImports: ['IgxPreventDocumentScrollModule', 'IgxTreeGridModule', 'IgxButtonModule', 'IgxTooltipModule', 'ReactiveFormsModule']
             })
         }));
 

src/app/grid/grid-validator-service-cross-field/grid-validator-service-cross-field.component.html

@@ -17,7 +17,7 @@
             <ng-template igxCellValidationError let-cell='cell' let-defaultErr='defaultErrorTemplate'>
                 <ng-container *ngTemplateOutlet="defaultErr" >
                 </ng-container>
-                <div *ngIf="cell.errors?.['beyondThreshold']">
+                <div *ngIf="cell.validation.errors?.['beyondThreshold']">
                     The date cannot be in the future.
                 </div>
             </ng-template>
@@ -32,7 +32,7 @@
             <ng-template igxCellValidationError let-cell='cell' let-defaultErr='defaultErrorTemplate'>
                 <ng-container *ngTemplateOutlet="defaultErr">
                 </ng-container>
-                <div *ngIf="cell.errors?.['beyondThreshold']">
+                <div *ngIf="cell.validation.errors?.['beyondThreshold']">
                     The date cannot be in the future.
                 </div>
             </ng-template>

src/app/hierarchical-grid/hierarchical-grid-validator-service-extended/hierarchical-grid-validator-service-extended.component.html

@@ -10,7 +10,7 @@
             <ng-template igxCellValidationError let-cell='cell' let-defaultErr="defaultErrorTemplate">
                 <ng-container *ngTemplateOutlet="defaultErr">
                 </ng-container>
-                <div *ngIf="cell.validations.errors?.['phoneFormat']">
+                <div *ngIf="cell.validation.errors?.['phoneFormat']">
                     Please enter correct phone format
                 </div>
             </ng-template>

src/app/hierarchical-grid/hierarchical-grid-validator-service-extended/hierarchical-grid-validator-service-extended.component.ts

@@ -48,9 +48,9 @@ export class HierarchicalGridValidatorServiceExtendedComponent {
         const requiredDateRecord = formGroupArgs.formGroup.get('RequiredDate');
         const shippedDateRecord = formGroupArgs.formGroup.get('ShippedDate');
 
-        orderDateRecord.addValidators(this.futureDateValidator());
-        requiredDateRecord.addValidators([this.futureDateValidator(), this.pastDateValidator()]);
-        shippedDateRecord.addValidators([this.futureDateValidator(), this.pastDateValidator()]);
+        orderDateRecord?.addValidators(this.futureDateValidator());
+        requiredDateRecord?.addValidators([this.futureDateValidator(), this.pastDateValidator()]);
+        shippedDateRecord?.addValidators([this.futureDateValidator(), this.pastDateValidator()]);
     }
 
     public get hasTransactions(): boolean {

src/app/tree-grid/tree-grid-validator-service-cross-field/tree-grid-validator-service-cross-field.component.html

@@ -6,17 +6,17 @@
         <igx-column field="Age" header="Age" dataType="number" [editable]="true" required min="18" max="99"></igx-column>
         <igx-column field="Name" header="Full Name" dataType="string" [editable]="true" required></igx-column>
         <igx-column field="City" header="City" dataType="string" [editable]="true" required>
-            <ng-template igxCellEditor let-cell="cell" >
-                <igx-select [(ngModel)]="cell.editValue" [igxFocus]="true">
+            <ng-template igxCellEditor let-cell="cell" let-fc='formControl'>
+                <igx-select [formControl]="fc" [igxFocus]="true" >
                     <igx-select-item *ngFor="let city of cities" [value]="city">
                         {{ city }}
                     </igx-select-item>
                 </igx-select>
             </ng-template>
         </igx-column>
         <igx-column field="Country" header="Country" dataType="string" [editable]="true" required>
-            <ng-template igxCellEditor let-cell="cell">
-                <igx-select [(ngModel)]="cell.editValue" [igxFocus]="true">
+            <ng-template igxCellEditor let-cell="cell" let-fc='formControl'>
+                <igx-select [formControl]="fc" [igxFocus]="true">
                     <igx-select-item *ngFor="let country of countries" [value]="country">
                         {{ country }}
                     </igx-select-item>

src/app/tree-grid/tree-grid.module.ts

@@ -2,7 +2,7 @@
 // tslint:disable:max-line-length
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import {
     IgxActionStripModule,
     IgxAvatarModule,
@@ -233,6 +233,7 @@ import { TreeGridValidationStyleComponent } from './tree-grid-validation-style/t
     imports: [
         CommonModule,
         FormsModule,
+        ReactiveFormsModule,
         IgxPreventDocumentScrollModule,
         TreeGridRoutingModule,
         IgxTreeGridModule,