Rework validator (#1007)

* Rework validator * Add test for angular@next * Update devextreme version * Update versions
DevExpress · Nov 22, 2019 · f556cf6 · f556cf6
1 parent 49f0798
commit f556cf6
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 39 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -25,3 +25,12 @@ jobs:
       - run:
           name: Run tests with Angular 7
           command: npx gulp run.tests
+      - run:
+          name: Install Angular Next
+          command: npm install @angular/animations@next @angular/core@next  @angular/common@next @angular/compiler@next @angular/forms@next @angular/platform-browser@next @angular/platform-server@next @angular/platform-browser-dynamic@next @angular/compiler-cli@next --unsafe-perm
+      - run:
+          name: Build tests with Angular Next
+          command: npx gulp build.tests
+      - run:
+          name: Run tests with Angular Next
+          command: npx gulp run.tests
diff --git a/src/core/component.ts b/src/core/component.ts
@@ -44,7 +44,6 @@ export abstract class DxComponent implements OnChanges, OnInit, DoCheck, AfterCo
     instance: any;
     isLinked = true;
     changedOptions = {};
-    createInstanceOnInit = true;
     widgetUpdateLocked = false;
 
     private _initTemplates() {
@@ -155,12 +154,8 @@ export abstract class DxComponent implements OnChanges, OnInit, DoCheck, AfterCo
         this._initPlatform();
         this._initOptions();
 
-        let createInstanceOnInit = this.createInstanceOnInit;
-
         this._initialOptions.onInitializing = function () {
-            if (createInstanceOnInit) {
-                this.beginUpdate();
-            }
+            this.beginUpdate();
         };
         this.instance = this._createInstance(element, this._initialOptions);
         this._initEvents();
@@ -198,9 +193,7 @@ export abstract class DxComponent implements OnChanges, OnInit, DoCheck, AfterCo
     }
 
     ngOnInit() {
-        if (this.createInstanceOnInit) {
-            this._createWidget(this.element.nativeElement);
-        }
+        this._createWidget(this.element.nativeElement);
     }
 
     ngDoCheck() {
@@ -214,9 +207,7 @@ export abstract class DxComponent implements OnChanges, OnInit, DoCheck, AfterCo
 
     ngAfterViewInit() {
         this._initTemplates();
-        if (this.createInstanceOnInit) {
-            this.instance.endUpdate();
-        }
+        this.instance.endUpdate();
     }
 
     applyOptions() {
@@ -237,8 +228,16 @@ export abstract class DxComponent implements OnChanges, OnInit, DoCheck, AfterCo
     }
 }
 
-export abstract class DxComponentExtension extends DxComponent {
+export abstract class DxComponentExtension extends DxComponent implements OnInit, AfterViewInit {
     createInstance(element: any) {
         this._createWidget(element);
     }
+
+    ngOnInit() {
+    }
+
+    ngAfterViewInit() {
+        this._createWidget(this.element.nativeElement);
+        this.instance.endUpdate();
+    }
 }
diff --git a/src/core/nested-option.ts b/src/core/nested-option.ts
@@ -216,6 +216,10 @@ export class NestedOptionHost {
     private _host: INestedOptionContainer;
     private _optionPath: IOptionPathGetter;
 
+    getHost(): INestedOptionContainer {
+        return this._host;
+    }
+
     setHost(host: INestedOptionContainer, optionPath?: IOptionPathGetter) {
         this._host = host;
         this._optionPath = optionPath || (() => '');

diff --git a/templates/component.tst b/templates/component.tst
@@ -6,7 +6,6 @@
 
 <# var implementedInterfaces = ['OnDestroy']; #>
 
-<# it.isEditor && implementedInterfaces.push('OnInit') && implementedInterfaces.push('AfterViewInit'); #>
 <# it.isEditor && implementedInterfaces.push('ControlValueAccessor'); #>
 <# collectionProperties.length && implementedInterfaces.push('OnChanges', 'DoCheck'); #>
 
@@ -23,11 +22,11 @@ import {
 
     Input,
     Output,
-    OnDestroy,
+    OnDestroy,<#? it.isExtension #>
+    SkipSelf,
+    Optional,
+    Host,<#?#>
     EventEmitter<#? it.isEditor #>,
-    OnInit,
-    AfterViewInit,
-    ContentChild,
     forwardRef,
     HostListener<#?#><#? collectionProperties.length #>,
     OnChanges,
@@ -42,8 +41,6 @@ import DevExpress from 'devextreme/bundles/dx.all';<#?#>
 
 import <#= it.className #> from '<#= it.module #>';
 <#? it.isEditor #>
-import { DxValidatorComponent } from './validator';
-
 import {
     ControlValueAccessor,
     NG_VALUE_ACCESSOR
@@ -87,10 +84,6 @@ const CUSTOM_VALUE_ACCESSOR_PROVIDER = {
 })
 export class <#= it.className #>Component extends <#= baseClass #> <#? implementedInterfaces.length #>implements <#= implementedInterfaces.join(', ') #> <#?#>{
     instance: <#= it.className #>;
-<#? it.isEditor #>
-    @ContentChild(DxValidatorComponent)
-    validator: DxValidatorComponent;
-<#?#>
 <#~ it.properties :prop:i #><#? prop.description #>
     /**
      * <#= prop.description #>
@@ -125,9 +118,15 @@ export class <#= it.className #>Component extends <#= baseClass #> <#? implement
     }
 <#~#>
 
+<#? it.isExtension #>
+    parentElement: any;
+<#?#>
+
     constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost,
             <#? collectionProperties.length #>private <#?#>_watcherHelper: WatcherHelper<#? collectionProperties.length #>,
-            private _idh: IterableDifferHelper<#?#>, optionHost: NestedOptionHost,
+            private _idh: IterableDifferHelper<#?#>,<#? it.isExtension #>
+            @SkipSelf() @Optional() @Host() parentOptionHost: NestedOptionHost,<#?#>
+            optionHost: NestedOptionHost,
             transferState: TransferState,
             @Inject(PLATFORM_ID) platformId: any) {
 
@@ -136,15 +135,30 @@ export class <#= it.className #>Component extends <#= baseClass #> <#? implement
         this._createEventEmitters([
             <#~ it.events :event:i #>{ <#? event.subscribe #>subscribe: '<#= event.subscribe #>', <#?#>emit: '<#= event.emit #>' }<#? i < it.events.length-1 #>,
             <#?#><#~#>
-        ]);<#? collectionProperties.length #>
+        ]);<#? it.isExtension #>
+        this.parentElement = this.getParentElement(parentOptionHost);<#?#><#? collectionProperties.length #>
 
         this._idh.setHost(this);<#?#>
         optionHost.setHost(this);
     }
 
     protected _createInstance(element, options) {
+<#? it.isExtension #>
+        if (this.parentElement) {
+            return new DxValidator(this.parentElement, options);
+        }
+<#?#>
         return new <#= it.className #>(element, options);
     }
+<#? it.isExtension #>
+    private getParentElement(host) {
+        if (host) {
+            const parentHost = host.getHost();
+            return (parentHost as any).element.nativeElement;
+        }
+        return;
+    }
+<#?#>
 <#? it.isEditor #>
     writeValue(value: any): void {
         this.eventHelper.lockedValueChangeEvent = true;
@@ -196,19 +210,6 @@ export class <#= it.className #>Component extends <#= baseClass #> <#? implement
             super._setOption(name, value);
         }
     }<#?#>
-<#? it.isEditor #>
-    ngOnInit() {
-        super.ngOnInit();
-        if (this.validator) {
-            this.validator.createInstanceOnInit = false;
-        }
-    }
-    ngAfterViewInit() {
-        super.ngAfterViewInit();
-        if (this.validator) {
-            this.validator.createInstance(this.element.nativeElement);
-        }
-    }<#?#>
 }
 
 @NgModule({