feat(dynamic-forms): adds hints to elements that allow mat-hints (Ter…

…adata#1221)
kriswinbush · Aug 15, 2018 · 9f91753 · 9f91753
1 parent dc87ae0
commit 9f91753
Show file tree

Hide file tree

Showing 15 changed files with 34 additions and 3 deletions.
diff --git a/src/app/components/components/dynamic-forms/dynamic-forms.component.ts b/src/app/components/components/dynamic-forms/dynamic-forms.component.ts
@@ -41,6 +41,7 @@ export class DynamicFormsDemoComponent {
 
   textElements: ITdDynamicElementConfig[] = [{
     name: 'input',
+    hint: 'this is an input hint',
     type: TdDynamicElement.Input,
     required: false,
     flex: 50,
@@ -65,6 +66,7 @@ export class DynamicFormsDemoComponent {
     flex: 50,
   }, {
     name: 'textarea',
+    hint: 'this is a textarea hint',
     type: TdDynamicElement.Textarea,
     required: false,
   }, {
@@ -114,6 +116,7 @@ export class DynamicFormsDemoComponent {
     required: true,
   }, {
     name: 'value-label-select',
+    hint: 'this is a select hint',
     type: TdDynamicElement.Select,
     selections: [
       {label: 'Test1', value: 1},
@@ -126,12 +129,14 @@ export class DynamicFormsDemoComponent {
   fileElements: ITdDynamicElementConfig[] = [{
     name: 'file-input',
     label: 'Browse a file',
+    hint: 'this is a file input hint',
     type: TdDynamicElement.FileInput,
   }];
 
   dateElements: ITdDynamicElementConfig[] = [{
     name: 'date-input',
     label: 'Select a date',
+    hint: 'this is a datepicker hint',
     type: TdDynamicElement.Datepicker,
     min: new Date(2018, 1, 1).setHours(0, 0, 0, 0),
   }];

diff --git a/src/platform/dynamic-forms/README.md b/src/platform/dynamic-forms/README.md
@@ -52,14 +52,16 @@ Pass an array of javascript objects that implement [ITdDynamicElementConfig] wit
 export interface ITdDynamicElementConfig {
   label?: string;
   name: string;
+  hint?: string;
   type: TdDynamicType | TdDynamicElement | Type<any>;
   required?: boolean;
   min?: any;
   max?: any;
-  minLength?: string;
-  maxLength?: string;
-  selections?: any[];
+  minLength?: any;
+  maxLength?: any;
+  selections?: any[] | { value: any, label: string }[];
   default?: any;
+  flex?: number;
   validators?: ITdDynamicElementValidator[];
 }
 ```
@@ -99,6 +101,7 @@ export class DynamicCustomComponent {
 export class Demo {
   elements: ITdDynamicElementConfig[] = [{
     name: 'input',
+    hint: 'hint',
     type: TdDynamicElement.Input,
     required: true,
   }, {

diff --git a/src/platform/dynamic-forms/dynamic-element.component.ts b/src/platform/dynamic-forms/dynamic-element.component.ts
@@ -55,6 +55,11 @@ export class TdDynamicElementComponent extends _TdDynamicElementMixinBase
    */
   @Input() label: string = '';
 
+  /**
+   * Sets hint to be displayed.
+   */
+  @Input() hint: string = '';
+
   /**
    * Sets type or element of element to be rendered.
    * Throws error if does not exist or no supported.
@@ -118,6 +123,7 @@ export class TdDynamicElementComponent extends _TdDynamicElementMixinBase
     this._instance = ref.instance;
     this._instance.control = this.dynamicControl;
     this._instance.label = this.label;
+    this._instance.hint = this.hint;
     this._instance.type = this.type;
     this._instance.value = this.value;
     this._instance.required = this.required;

diff --git a/...tform/dynamic-forms/dynamic-elements/dynamic-datepicker/dynamic-datepicker.component.html b/...tform/dynamic-forms/dynamic-elements/dynamic-datepicker/dynamic-datepicker.component.html
@@ -8,6 +8,7 @@
             [required]="required"
             [min]="min"
             [max]="max"/>
+    <mat-hint>{{hint}}</mat-hint>
     <mat-datepicker-toggle matSuffix [for]="dynamicDatePicker"></mat-datepicker-toggle>
     <mat-datepicker #dynamicDatePicker></mat-datepicker>
   </mat-form-field>

diff --git a/...latform/dynamic-forms/dynamic-elements/dynamic-datepicker/dynamic-datepicker.component.ts b/...latform/dynamic-forms/dynamic-elements/dynamic-datepicker/dynamic-datepicker.component.ts
@@ -12,6 +12,8 @@ export class TdDynamicDatepickerComponent {
 
   label: string = '';
 
+  hint: string = '';
+
   type: string = undefined;
 
   required: boolean = undefined;

diff --git a/...tform/dynamic-forms/dynamic-elements/dynamic-file-input/dynamic-file-input.component.html b/...tform/dynamic-forms/dynamic-elements/dynamic-file-input/dynamic-file-input.component.html
@@ -11,6 +11,7 @@
           [value]="control?.value?.name"
           [placeholder]="label"
           readonly/>
+    <mat-hint>{{hint}}</mat-hint>
   </mat-form-field>
   <button mat-icon-button *ngIf="control.value" (click)="fileInput.clear()" (keyup.enter)="fileInput.clear()">
     <mat-icon>cancel</mat-icon>

diff --git a/...latform/dynamic-forms/dynamic-elements/dynamic-file-input/dynamic-file-input.component.ts b/...latform/dynamic-forms/dynamic-elements/dynamic-file-input/dynamic-file-input.component.ts
@@ -14,6 +14,8 @@ export class TdDynamicFileInputComponent {
 
   label: string = '';
 
+  hint: string = '';
+
   _handlefileDrop(value: File): void {
     this.control.setValue(value);
   }

diff --git a/src/platform/dynamic-forms/dynamic-elements/dynamic-input/dynamic-input.component.html b/src/platform/dynamic-forms/dynamic-elements/dynamic-input/dynamic-input.component.html
@@ -10,5 +10,6 @@
             [attr.max]="max"
             [attr.minLength]="minLength"
             [attr.maxLength]="maxLength"/>
+    <mat-hint>{{hint}}</mat-hint>
   </mat-form-field>
 </div>
diff --git a/src/platform/dynamic-forms/dynamic-elements/dynamic-input/dynamic-input.component.ts b/src/platform/dynamic-forms/dynamic-elements/dynamic-input/dynamic-input.component.ts
@@ -12,6 +12,8 @@ export class TdDynamicInputComponent {
 
   label: string = '';
 
+  hint: string = '';
+
   type: string = undefined;
 
   required: boolean = undefined;

diff --git a/src/platform/dynamic-forms/dynamic-elements/dynamic-select/dynamic-select.component.html b/src/platform/dynamic-forms/dynamic-elements/dynamic-select/dynamic-select.component.html
@@ -5,5 +5,6 @@
                 [required]="required">
       <mat-option *ngFor="let selection of selections" [value]="selection.value || selection">{{selection.label || selection}}</mat-option>
     </mat-select>
+    <mat-hint>{{hint}}</mat-hint>
   </mat-form-field>
 </div>
diff --git a/src/platform/dynamic-forms/dynamic-elements/dynamic-select/dynamic-select.component.ts b/src/platform/dynamic-forms/dynamic-elements/dynamic-select/dynamic-select.component.ts
@@ -12,6 +12,8 @@ export class TdDynamicSelectComponent {
 
   label: string = '';
 
+  hint: string = '';
+
   required: boolean = undefined;
 
   selections: any[] = undefined;

diff --git a/src/platform/dynamic-forms/dynamic-elements/dynamic-textarea/dynamic-textarea.component.html b/src/platform/dynamic-forms/dynamic-elements/dynamic-textarea/dynamic-textarea.component.html
@@ -7,5 +7,6 @@
             [required]="required"
             rows="4">
     </textarea>
+    <mat-hint>{{hint}}</mat-hint>
   </mat-form-field>
 </div>
diff --git a/src/platform/dynamic-forms/dynamic-elements/dynamic-textarea/dynamic-textarea.component.ts b/src/platform/dynamic-forms/dynamic-elements/dynamic-textarea/dynamic-textarea.component.ts
@@ -12,6 +12,8 @@ export class TdDynamicTextareaComponent {
 
   label: string = '';
 
+  hint: string = '';
+
   required: boolean = undefined;
 
 }
diff --git a/src/platform/dynamic-forms/dynamic-forms.component.html b/src/platform/dynamic-forms/dynamic-forms.component.html
@@ -13,6 +13,7 @@
           [dynamicControl]="dynamicForm.controls[element.name]"
           [id]="element.name"
           [label]="element.label || element.name"
+          [hint]="element.hint"
           [type]="element.type"
           [required]="element.required"
           [min]="element.min"

diff --git a/src/platform/dynamic-forms/services/dynamic-forms.service.ts b/src/platform/dynamic-forms/services/dynamic-forms.service.ts
@@ -37,6 +37,7 @@ export interface ITdDynamicElementValidator {
 export interface ITdDynamicElementConfig {
   label?: string;
   name: string;
+  hint?: string;
   type: TdDynamicType | TdDynamicElement | Type<any>;
   required?: boolean;
   min?: any;