feat(dynamic-forms): add custom type support (closes #314) (#1212)

* refactor(dynamic-forms): remove ngModel usage this is needed because we were mixing reactive forms with template driven forms and this usage will be deprecated in angular 7 also used the covalent control value accessor mixin * chore(): remove AbstractControlValueAccessor code since its not needed * fix(): form support was not needed in the dynamic elements since we are injecting the control instance into the underlying element form support was never needed * feat(dynamic-forms): add custom type support add ability to add your own custom type as a dynamic element * fix(): apply review requests
Teradata · Aug 14, 2018 · 2dce858 · 2dce858
1 parent 52d21f2
commit 2dce858
Show file tree

Hide file tree

Showing 7 changed files with 178 additions and 15 deletions.
diff --git a/src/app/components/components/components.module.ts b/src/app/components/components/components.module.ts
@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 import { componentsRoutes } from './components.routes';
 
@@ -70,6 +70,8 @@ import { DocumentationToolsModule } from '../../documentation-tools';
 
 import { ToolbarModule } from '../../components/toolbar/toolbar.module';
 
+import { TdTestDynamicComponent } from './dynamic-forms/dynamic-forms.component';
+
 @NgModule({
   declarations: [
     ComponentsComponent,
@@ -101,11 +103,13 @@ import { ToolbarModule } from '../../components/toolbar/toolbar.module';
     // External Dependencies
     NgxChartsDemoComponent,
     NgxTranslateDemoComponent,
+    TdTestDynamicComponent,
   ],
   imports: [
     /** Angular Modules */
     CommonModule,
     FormsModule,
+    ReactiveFormsModule,
     /** Material Modules */
     MatButtonModule,
     MatListModule,
@@ -154,5 +158,8 @@ import { ToolbarModule } from '../../components/toolbar/toolbar.module';
     componentsRoutes,
     ToolbarModule,
   ],
+  entryComponents: [
+    TdTestDynamicComponent,
+  ],
 })
 export class ComponentsModule {}
diff --git a/src/app/components/components/dynamic-forms/dynamic-forms.component.html b/src/app/components/components/dynamic-forms/dynamic-forms.component.html
@@ -530,4 +530,83 @@ <h4>Angular Validators</h4>
   </mat-card-content>
 </mat-card>
 
+<mat-card>
+  <mat-card-content>
+    <h3 class="mat-title">Custom Dynamic Elements</h3>
+    <mat-divider></mat-divider>
+    <mat-tab-group mat-stretch-tabs dynamicHeight>
+      <mat-tab>
+        <ng-template matTabLabel>Demo</ng-template>
+        <td-dynamic-forms [elements]="customElements">
+        </td-dynamic-forms>
+      </mat-tab>
+      <mat-tab>
+        <ng-template matTabLabel>Code</ng-template>
+        <h4>Setup</h4>
+        <p>Custom Component:</p>
+        <td-highlight lang="typescript">
+          <![CDATA[
+            import { Component } from '@angular/core';
+            import { FormControl } from '@angular/forms';
+
+            @Component({
+              selector: 'td-dynamic-input-test',
+              template: `<td-chips [items]="selections" [formControl]="control"></td-chips>`,
+            })
+            export class TdTestDynamicComponent {
+
+              /* control property needed to properly bind the underlying element */
+              control: FormControl;
+
+              /* map any of the properties you passed in the config */
+              selections: string[] = [];
+
+            }
+          ]]>
+        </td-highlight>
+        <p>Module imports:</p>
+        <td-highlight lang="typescript">
+          <![CDATA[
+            @NgModule({
+              declarations: [
+                ...
+                TdTestDynamicComponent,
+              ],
+              imports: [
+                ...
+                CommonModule,
+                ReactiveFormsModule,
+                CovalentDynamicFormsModule,
+              ],
+              entryComponents: [
+                TdTestDynamicComponent,
+              ],
+            })
+            export class ComponentsModule {}
+          ]]>          
+        </td-highlight>
+        <h4>Usage:</h4>
+        <p>HTML:</p>
+        <td-highlight lang="html">
+          <![CDATA[
+            <td-dynamic-forms [elements]="customElements">
+            </td-dynamic-forms>
+          ]]>
+        </td-highlight>
+        <p>Typescript:</p>
+        <td-highlight lang="typescript">
+          <![CDATA[
+            customElements: ITdDynamicElementConfig[] = [{
+              name: 'custom',
+              type: TdTestDynamicComponent,
+              default: ['list1'],
+              selections: ['list1', 'list2', 'list3'],
+              flex: 100,
+            }];
+          ]]>
+        </td-highlight>
+      </mat-tab>
+    </mat-tab-group>
+  </mat-card-content>
+</mat-card>
 <td-readme-loader resourceUrl="platform/dynamic-forms/README.md"></td-readme-loader>
diff --git a/src/app/components/components/dynamic-forms/dynamic-forms.component.ts b/src/app/components/components/dynamic-forms/dynamic-forms.component.ts
@@ -11,6 +11,19 @@ import {
   TdDynamicType,
 } from '@covalent/dynamic-forms';
 
+import { FormControl } from '@angular/forms';
+
+@Component({
+  selector: 'td-dynamic-input-test',
+  template: `<td-chips [items]="selections" [formControl]="control"></td-chips>`,
+})
+export class TdTestDynamicComponent {
+
+  control: FormControl;
+  selections: string[] = [];
+
+}
+
 @Component({
   selector: 'dynamic-forms-demo',
   styleUrls: ['./dynamic-forms.component.scss'],
@@ -136,6 +149,14 @@ export class DynamicFormsDemoComponent {
     flex: 20,
   }];
 
+  customElements: ITdDynamicElementConfig[] = [{
+    name: 'custom',
+    type: TdTestDynamicComponent,
+    default: ['list1'],
+    selections: ['list1', 'list2', 'list3'],
+    flex: 100,
+  }];
+
   elementOptions: any[] = [
     TdDynamicElement.Input,
     TdDynamicType.Number,

diff --git a/src/platform/dynamic-forms/README.md b/src/platform/dynamic-forms/README.md
@@ -52,7 +52,7 @@ Pass an array of javascript objects that implement [ITdDynamicElementConfig] wit
 export interface ITdDynamicElementConfig {
   label?: string;
   name: string;
-  type: TdDynamicType | TdDynamicElement;
+  type: TdDynamicType | TdDynamicElement | Type<any>;
   required?: boolean;
   min?: any;
   max?: any;
@@ -64,6 +64,8 @@ export interface ITdDynamicElementConfig {
 }
 ```
 
+NOTE: For custom types, you need to implement a `[control]` property and use it in your underlying element.
+
 Example for HTML usage:
 
 ```html
@@ -85,6 +87,14 @@ Example for HTML usage:
 ```typescript
 import { ITdDynamicElementConfig, TdDynamicElement, TdDynamicType } from '@covalent/dynamic-forms';
 ...
+/* CUSTOM TYPE */
+  template: '<label>{{label}}</label><input [formControl]="control">',
+})
+export class DynamicCustomComponent {
+  control: FormControl;
+  label: string;
+}
+...
 })
 export class Demo {
   elements: ITdDynamicElementConfig[] = [{
@@ -125,6 +135,10 @@ export class Demo {
     name: 'datepicker',
     label: 'Date',
     type: TdDynamicElement.Datepicker,
+  }, {
+    name: 'custom',
+    label: 'Custom',
+    type: DynamicCustomComponent,
   }];
 }
 ```

diff --git a/src/platform/dynamic-forms/dynamic-element.component.ts b/src/platform/dynamic-forms/dynamic-element.component.ts
@@ -1,4 +1,4 @@
-import { Component, Directive, Input, HostBinding, OnInit, SimpleChanges, OnChanges, TemplateRef, ChangeDetectorRef } from '@angular/core';
+import { Component, Directive, Input, HostBinding, OnInit, SimpleChanges, OnChanges, TemplateRef, ChangeDetectorRef, Type } from '@angular/core';
 import { ViewChild, ViewContainerRef } from '@angular/core';
 import { ComponentFactoryResolver, ComponentRef, forwardRef } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR, FormControl } from '@angular/forms';
@@ -110,8 +110,9 @@ export class TdDynamicElementComponent extends _TdDynamicElementMixinBase
   }
 
   ngOnInit(): void {
+    let component: any = <any>this.type instanceof Type ? this.type : this._dynamicFormsService.getDynamicElement(this.type);
     let ref: ComponentRef<any> = this._componentFactoryResolver.
-      resolveComponentFactory(this._dynamicFormsService.getDynamicElement(this.type))
+      resolveComponentFactory(component)
       .create(this.childElement.viewContainer.injector);
     this.childElement.viewContainer.insert(ref.hostView);
     this._instance = ref.instance;

diff --git a/src/platform/dynamic-forms/dynamic-forms.component.spec.ts b/src/platform/dynamic-forms/dynamic-forms.component.spec.ts
@@ -5,9 +5,9 @@ import {
   ComponentFixture,
 } from '@angular/core/testing';
 import 'hammerjs';
-import { Component } from '@angular/core';
+import { Component, NgModule } from '@angular/core';
 import { MatNativeDateModule } from '@angular/material/core';
-import { Validators, AbstractControl } from '@angular/forms';
+import { Validators, AbstractControl, FormControl, ReactiveFormsModule } from '@angular/forms';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { By } from '@angular/platform-browser';
 import { TdDynamicType, TdDynamicElement, ITdDynamicElementConfig,
@@ -21,6 +21,7 @@ describe('Component: TdDynamicForms', () => {
         NoopAnimationsModule,
         MatNativeDateModule,
         CovalentDynamicFormsModule,
+        TdDynamicTestModule,
       ],
       declarations: [
         TdDynamicFormsTestComponent,
@@ -160,7 +161,6 @@ describe('Component: TdDynamicForms', () => {
       let dynamicFormsComponent: TdDynamicFormsComponent =
           fixture.debugElement.query(By.directive(TdDynamicFormsComponent)).componentInstance;
       expect(dynamicFormsComponent.valid).toBeTruthy();
-      /* tslint:disable-next-line */
       expect(JSON.stringify(dynamicFormsComponent.value)).toBe(JSON.stringify({first_name: 'name', age: 20, dob: dob}));
     });
   })));
@@ -183,7 +183,6 @@ describe('Component: TdDynamicForms', () => {
       let dynamicFormsComponent: TdDynamicFormsComponent =
         fixture.debugElement.query(By.directive(TdDynamicFormsComponent)).componentInstance;
       expect(dynamicFormsComponent.valid).toBeFalsy();
-      /* tslint:disable-next-line */
       expect(JSON.stringify(dynamicFormsComponent.value)).toBe(JSON.stringify({password: 'mypwd'}));
     });
   })));
@@ -206,7 +205,6 @@ describe('Component: TdDynamicForms', () => {
       let dynamicFormsComponent: TdDynamicFormsComponent =
         fixture.debugElement.query(By.directive(TdDynamicFormsComponent)).componentInstance;
       expect(dynamicFormsComponent.valid).toBeFalsy();
-      /* tslint:disable-next-line */
       expect(JSON.stringify(dynamicFormsComponent.value)).toBe(JSON.stringify({password: 'myVeryLongString'}));
     });
   })));
@@ -230,7 +228,6 @@ describe('Component: TdDynamicForms', () => {
       let dynamicFormsComponent: TdDynamicFormsComponent =
         fixture.debugElement.query(By.directive(TdDynamicFormsComponent)).componentInstance;
       expect(dynamicFormsComponent.valid).toBeTruthy();
-      /* tslint:disable-next-line */
       expect(JSON.stringify(dynamicFormsComponent.value)).toBe(JSON.stringify({password: 'mySuperSecretPw'}));
     });
   })));
@@ -258,7 +255,6 @@ describe('Component: TdDynamicForms', () => {
       let dynamicFormsComponent: TdDynamicFormsComponent =
           fixture.debugElement.query(By.directive(TdDynamicFormsComponent)).componentInstance;
       expect(dynamicFormsComponent.valid).toBeFalsy();
-      /* tslint:disable-next-line */
       expect(JSON.stringify(dynamicFormsComponent.value)).toBe(JSON.stringify({number: 15}));
     });
   })));
@@ -284,7 +280,6 @@ describe('Component: TdDynamicForms', () => {
       let dynamicFormsComponent: TdDynamicFormsComponent =
           fixture.debugElement.query(By.directive(TdDynamicFormsComponent)).componentInstance;
       expect(dynamicFormsComponent.valid).toBeFalsy();
-      /* tslint:disable-next-line */
       expect(JSON.stringify(dynamicFormsComponent.value)).toBe(JSON.stringify({hexColor: '#ZZZZZZ'}));
     });
   })));
@@ -320,10 +315,30 @@ describe('Component: TdDynamicForms', () => {
       let dynamicFormsComponent: TdDynamicFormsComponent =
           fixture.debugElement.query(By.directive(TdDynamicFormsComponent)).componentInstance;
       expect(dynamicFormsComponent.valid).toBeTruthy();
-      /* tslint:disable-next-line */
       expect(JSON.stringify(dynamicFormsComponent.value)).toBe(JSON.stringify({hexColor: '#F1F1F1', number: 22}));
     });
   })));
+
+  it('should render dynamic custom element', async(inject([], () => {
+
+    let fixture: ComponentFixture<any> = TestBed.createComponent(TdDynamicFormsTestComponent);
+    let component: TdDynamicFormsTestComponent = fixture.debugElement.componentInstance;
+
+    expect(fixture.debugElement.queryAll(By.directive(TdDynamicElementComponent)).length).toBe(0);
+    component.elements = [{
+      name: 'custom',
+      type: TdDynamicTestComponent,
+      default: 'value',
+    }];
+    fixture.detectChanges();
+    fixture.whenStable().then(() => {
+      expect(fixture.debugElement.queryAll(By.directive(TdDynamicElementComponent)).length).toBe(1);
+      let dynamicFormsComponent: TdDynamicFormsComponent =
+          fixture.debugElement.query(By.directive(TdDynamicFormsComponent)).componentInstance;
+      expect(dynamicFormsComponent.valid).toBeTruthy();
+      expect(JSON.stringify(dynamicFormsComponent.value)).toBe(JSON.stringify({custom: 'value'}));
+    });
+  })));
 });
 
 @Component({
@@ -334,3 +349,29 @@ describe('Component: TdDynamicForms', () => {
 class TdDynamicFormsTestComponent {
   elements: ITdDynamicElementConfig[];
 }
+
+@Component({
+  selector: 'td-dynamic-input-test',
+  template: `<input [formControl]="control">`,
+})
+export class TdDynamicTestComponent {
+
+  control: FormControl;
+
+}
+
+@NgModule({
+  declarations: [
+    TdDynamicTestComponent,
+  ],
+  imports: [
+    ReactiveFormsModule,
+  ],
+  exports: [
+    TdDynamicTestComponent,
+  ],
+  entryComponents: [
+    TdDynamicTestComponent,
+  ],
+})
+export class TdDynamicTestModule {}
diff --git a/src/platform/dynamic-forms/services/dynamic-forms.service.ts b/src/platform/dynamic-forms/services/dynamic-forms.service.ts
@@ -1,4 +1,4 @@
-import { Injectable, Provider, SkipSelf, Optional } from '@angular/core';
+import { Injectable, Provider, SkipSelf, Optional, Type } from '@angular/core';
 import { Validators, ValidatorFn, FormControl, AbstractControl } from '@angular/forms';
 
 import { TdDynamicInputComponent } from '../dynamic-elements/dynamic-input/dynamic-input.component';
@@ -37,7 +37,7 @@ export interface ITdDynamicElementValidator {
 export interface ITdDynamicElementConfig {
   label?: string;
   name: string;
-  type: TdDynamicType | TdDynamicElement;
+  type: TdDynamicType | TdDynamicElement | Type<any>;
   required?: boolean;
   min?: any;
   max?: any;