feat(dynamic-forms): add support for Materials multiselect form field (…

…closes #820)

feat(dynamic-forms): add support for Materials multiselect form field (closes #820)

src/platform/dynamic-forms/dynamic-element.component.ts

@@ -96,6 +96,11 @@ export class TdDynamicElementComponent extends _TdDynamicElementMixinBase
    */
   @Input() selections: any[] = undefined;
 
+  /**
+   * Sets multiple property for array elements (if supported by element).
+   */
+  @Input() multiple: boolean = undefined;
+
   /**
    * Sets error message template so it can be injected into dynamic components.
    */
@@ -137,6 +142,7 @@ export class TdDynamicElementComponent extends _TdDynamicElementMixinBase
     this._instance.minLength = this.minLength;
     this._instance.maxLength = this.maxLength;
     this._instance.selections = this.selections;
+    this._instance.multiple = this.multiple;
     this._instance.errorMessageTemplate = this.errorMessageTemplate;
   }
 

src/platform/dynamic-forms/dynamic-elements/dynamic-select/dynamic-select.component.html

@@ -2,7 +2,8 @@
   <mat-form-field class="td-dynamic-select-field">
     <mat-select [formControl]="control"
                 [placeholder]="label"
-                [required]="required">
+                [required]="required"
+                [multiple]="multiple">
       <mat-option *ngFor="let selection of selections" [value]="selection.value || selection">{{selection.label || selection}}</mat-option>
     </mat-select>
     <mat-hint>{{hint}}</mat-hint>

src/platform/dynamic-forms/dynamic-elements/dynamic-select/dynamic-select.component.ts

@@ -18,6 +18,8 @@ export class TdDynamicSelectComponent {
 
   selections: any[] = undefined;
 
+  multiple: boolean = undefined;
+
   errorMessageTemplate: TemplateRef<any> = undefined;
 
 }

src/platform/dynamic-forms/dynamic-forms.component.html

@@ -21,6 +21,7 @@
           [minLength]="element.minLength"
           [maxLength]="element.maxLength"
           [selections]="element.selections"
+          [multiple]="element.multiple"
           [errorMessageTemplate]="getErrorTemplateRef(element.name)">
         </td-dynamic-element>
       </div>

src/platform/dynamic-forms/services/dynamic-forms.service.ts

@@ -45,6 +45,7 @@ export interface ITdDynamicElementConfig {
   minLength?: any;
   maxLength?: any;
   selections?: string[] | { value: any, label: string }[];
+  multiple?: boolean;
   default?: any;
   flex?: number;
   validators?: ITdDynamicElementValidator[];

src/test-bed/main/main.component.html

@@ -7,4 +7,7 @@ <h4>Sandbox Links:</h4>
 </div>
 <div class="pad">
   <a [routerLink]="'/tabselect'">Tab Select</a>
+</div>
+<div class="pad">
+  <a [routerLink]="'/multiselect'">Multiselect</a>
 </div>

src/test-bed/sandbox/multiselect/multiselect.component.html

@@ -0,0 +1,2 @@
+<td-dynamic-forms [elements]="elements"></td-dynamic-forms>
+<button mat-raised-button (click)="submit()">Submit</button>

src/test-bed/sandbox/multiselect/multiselect.component.ts

@@ -0,0 +1,46 @@
+import { Component, ViewChild } from '@angular/core';
+import {
+  ITdDynamicElementConfig,
+  TdDynamicElement,
+  TdDynamicFormsComponent,
+} from '@covalent/dynamic-forms';
+
+@Component({
+  selector: 'multi-select-demo',
+  styleUrls: ['./multiselect.component.scss'],
+  templateUrl: './multiselect.component.html',
+})
+export class MultiSelectDemoComponent {
+  elements: ITdDynamicElementConfig[] = [
+    {
+      type: TdDynamicElement.Select,
+      name: 'multifield',
+      label: 'No Multiselect',
+      selections: ['A', 'B', 'C', 'D'],
+      flex: 50,
+    },
+    {
+      type: TdDynamicElement.Select,
+      name: 'multifield2',
+      label: 'Multiselect',
+      multiple: true,
+      selections: ['A', 'B', 'C'],
+      flex: 50,
+    },
+    {
+      type: TdDynamicElement.Select,
+      name: 'multifield3',
+      label: 'Multiselect Alt',
+      multiple: true,
+      selections: ['A', 'B', 'C'],
+      default: ['A', 'C'],
+      flex: 50,
+    },
+  ];
+
+  @ViewChild(TdDynamicFormsComponent) public form: TdDynamicFormsComponent;
+
+  public submit(): void {
+    this.form.refresh();
+  }
+}

src/test-bed/test-bed.module.ts

@@ -14,11 +14,15 @@ import { BreadcrumbDemoComponent } from './sandbox/breadcrumbs/breadcrumbs.compo
 import { TabSelectDemoComponent } from './sandbox/tab-select/tab-select.component';
 import { appRoutes, appRoutingProviders } from './test-bed.routes';
 
+import { CovalentDynamicFormsModule } from '@covalent/dynamic-forms';
+import { MultiSelectDemoComponent } from './sandbox/multiselect/multiselect.component';
+
 @NgModule({
   declarations: [
     TestBedComponent,
     BreadcrumbDemoComponent,
     TabSelectDemoComponent,
+    MultiSelectDemoComponent,
     MainComponent,
   ],
   imports: [
@@ -28,6 +32,7 @@ import { appRoutes, appRoutingProviders } from './test-bed.routes';
     FormsModule,
     MatDividerModule,
     appRoutes,
+    CovalentDynamicFormsModule,
     /** Experimental Modules */
     CovalentBreadcrumbsModule,
     CovalentTabSelectModule,

src/test-bed/test-bed.routes.ts

@@ -3,6 +3,7 @@ import { Routes, RouterModule } from '@angular/router';
 import { BreadcrumbDemoComponent } from './sandbox/breadcrumbs/breadcrumbs.component';
 import { TabSelectDemoComponent } from './sandbox/tab-select/tab-select.component';
 import { MainComponent } from './main/main.component';
+import { MultiSelectDemoComponent } from './sandbox/multiselect/multiselect.component';
 
 const routes: Routes = [
   {
@@ -17,6 +18,10 @@ const routes: Routes = [
     component: TabSelectDemoComponent,
     path: 'tabselect',
   },
+  {
+    component: MultiSelectDemoComponent,
+    path: 'multiselect',
+  },
 ];
 
 export const appRoutingProviders: any[] = [