fix(dynamic-forms): make sure hints and errors dont overlap (Teradata…

…#1222) properly leveraging the mat-error element on components that use mat-form-field fixes this issue, but to achieve this we need to refactor how the error message is shown also add documentation on how to show the error message when creating a custom component
kriswinbush · Aug 15, 2018 · 816ab1e · 816ab1e
1 parent 9f91753
commit 816ab1e
Show file tree

Hide file tree

Showing 15 changed files with 121 additions and 21 deletions.
diff --git a/src/app/components/components/dynamic-forms/dynamic-forms.component.html b/src/app/components/components/dynamic-forms/dynamic-forms.component.html
@@ -538,6 +538,13 @@ <h3 class="mat-title">Custom Dynamic Elements</h3>
       <mat-tab>
         <ng-template matTabLabel>Demo</ng-template>
         <td-dynamic-forms [elements]="customElements">
+          <ng-template let-element ngFor [ngForOf]="customElements">
+            <ng-template let-control="control" [tdDynamicFormsError]="element.name">
+              <span *ngIf="control.touched || !control.pristine">
+                <span *ngIf="control.hasError('invalidChips')">No more than 2 chips</span>
+              </span>
+            </ng-template>
+          </ng-template>
         </td-dynamic-forms>
       </mat-tab>
       <mat-tab>
@@ -546,12 +553,20 @@ <h4>Setup</h4>
         <p>Custom Component:</p>
         <td-highlight lang="typescript">
           <![CDATA[
-            import { Component } from '@angular/core';
+            import { Component, TemplateRef } from '@angular/core';
             import { FormControl } from '@angular/forms';
 
             @Component({
               selector: 'td-dynamic-input-test',
-              template: `<td-chips [items]="selections" [formControl]="control"></td-chips>`,
+              template: `<td-chips [items]="selections" [formControl]="control"></td-chips>
+                          <div *ngIf="errorMessageTemplate && control?.errors"
+                              class="tc-red-600"
+                              [style.font-size.%]="'70'">
+                            <ng-template
+                              [ngTemplateOutlet]="errorMessageTemplate"
+                              [ngTemplateOutletContext]="{control: control, errors: control?.errors}">
+                            </ng-template>
+                          </div>`,
             })
             export class TdTestDynamicComponent {
 
@@ -561,6 +576,9 @@ <h4>Setup</h4>
               /* map any of the properties you passed in the config */
               selections: string[] = [];
 
+              /* map the error message template and use it anywhere you need to */
+              errorMessageTemplate: TemplateRef<any>;
+
             }
           ]]>
         </td-highlight>
@@ -590,6 +608,13 @@ <h4>Usage:</h4>
         <td-highlight lang="html">
           <![CDATA[
             <td-dynamic-forms [elements]="customElements">
+              <ng-template let-element ngFor [ngForOf]="customElements">
+                <ng-template let-control="control" [tdDynamicFormsError]="element.name">
+                  <span *ngIf="control.touched || !control.pristine">
+                    <span *ngIf="control.hasError('invalidChips')">No more than 2 chips</span>
+                  </span>
+                </ng-template>
+              </ng-template>
             </td-dynamic-forms>
           ]]>
         </td-highlight>
@@ -602,6 +627,12 @@ <h4>Usage:</h4>
               default: ['list1'],
               selections: ['list1', 'list2', 'list3'],
               flex: 100,
+              validators: [{
+                validator: (control: AbstractControl) => {
+                  let isValid: boolean = control.value.length <= 2;
+                  return !isValid ? {invalidChips: true} : undefined;
+                },
+              }],
             }];
           ]]>
         </td-highlight>

diff --git a/src/app/components/components/dynamic-forms/dynamic-forms.component.ts b/src/app/components/components/dynamic-forms/dynamic-forms.component.ts
@@ -1,4 +1,4 @@
-import { Component, HostBinding } from '@angular/core';
+import { Component, HostBinding, TemplateRef } from '@angular/core';
 import { AbstractControl, Validators } from '@angular/forms';
 import { TdCollapseAnimation } from '@covalent/core/common';
 import { slideInDownAnimation } from '../../../app.animations';
@@ -15,12 +15,21 @@ import { FormControl } from '@angular/forms';
 
 @Component({
   selector: 'td-dynamic-input-test',
-  template: `<td-chips [items]="selections" [formControl]="control"></td-chips>`,
+  template: `<td-chips [items]="selections" [formControl]="control"></td-chips>
+              <div *ngIf="errorMessageTemplate && control?.errors"
+                  class="tc-red-600"
+                  [style.font-size.%]="'70'">
+                <ng-template
+                  [ngTemplateOutlet]="errorMessageTemplate"
+                  [ngTemplateOutletContext]="{control: control, errors: control?.errors}">
+                </ng-template>
+              </div>`,
 })
 export class TdTestDynamicComponent {
 
   control: FormControl;
   selections: string[] = [];
+  errorMessageTemplate: TemplateRef<any>;
 
 }
 
@@ -80,6 +89,7 @@ export class DynamicFormsDemoComponent {
     name: 'number',
     label: 'Number',
     type: TdDynamicType.Number,
+    hint: 'this is an input hint',
     required: true,
     min: 18,
     max: 70,
@@ -160,6 +170,12 @@ export class DynamicFormsDemoComponent {
     default: ['list1'],
     selections: ['list1', 'list2', 'list3'],
     flex: 100,
+    validators: [{
+      validator: (control: AbstractControl) => {
+        let isValid: boolean = control.value.length <= 2;
+        return !isValid ? {invalidChips: true} : undefined;
+      },
+    }],
   }];
 
   elementOptions: any[] = [

diff --git a/src/platform/dynamic-forms/README.md b/src/platform/dynamic-forms/README.md
@@ -90,11 +90,26 @@ Example for HTML usage:
 import { ITdDynamicElementConfig, TdDynamicElement, TdDynamicType } from '@covalent/dynamic-forms';
 ...
 /* CUSTOM TYPE */
-  template: '<label>{{label}}</label><input [formControl]="control">',
+  template: `<label>{{label}}</label>
+              <input [formControl]="control">
+              <div *ngIf="errorMessageTemplate && control?.errors"
+                  class="tc-red-600"
+                  [style.font-size.%]="'70'">
+                <ng-template
+                  [ngTemplateOutlet]="errorMessageTemplate"
+                  [ngTemplateOutletContext]="{control: control, errors: control?.errors}">
+                </ng-template>
+              </div>`,
 })
 export class DynamicCustomComponent {
+  /* control property needed to properly bind the underlying element */
   control: FormControl;
+
+  /* map any of the properties you passed in the config */
   label: string;
+
+  /* map the error message template and use it anywhere you need to */
+  errorMessageTemplate: TemplateRef<any>;
 }
 ...
 })
@@ -142,6 +157,7 @@ export class Demo {
     name: 'custom',
     label: 'Custom',
     type: DynamicCustomComponent,
+    required: true,
   }];
 }
 ```

diff --git a/src/platform/dynamic-forms/dynamic-element.component.ts b/src/platform/dynamic-forms/dynamic-element.component.ts
@@ -96,6 +96,11 @@ export class TdDynamicElementComponent extends _TdDynamicElementMixinBase
    */
   @Input() selections: any[] = undefined;
 
+  /**
+   * Sets error message template so it can be injected into dynamic components.
+   */
+  @Input() errorMessageTemplate: TemplateRef<any> = undefined;
+
   @ViewChild(TdDynamicElementDirective) childElement: TdDynamicElementDirective;
 
   @HostBinding('attr.max')
@@ -132,6 +137,7 @@ export class TdDynamicElementComponent extends _TdDynamicElementMixinBase
     this._instance.minLength = this.minLength;
     this._instance.maxLength = this.maxLength;
     this._instance.selections = this.selections;
+    this._instance.errorMessageTemplate = this.errorMessageTemplate;
   }
 
   /**

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
@@ -9,6 +9,12 @@
             [min]="min"
             [max]="max"/>
     <mat-hint>{{hint}}</mat-hint>
+    <mat-error>
+      <ng-template
+        [ngTemplateOutlet]="errorMessageTemplate"
+        [ngTemplateOutletContext]="{control: control, errors: control?.errors}">
+      </ng-template>
+    </mat-error>
     <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
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, TemplateRef } from '@angular/core';
 import { FormControl } from '@angular/forms';
 
 @Component({
@@ -22,4 +22,6 @@ export class TdDynamicDatepickerComponent {
 
   max: number = undefined;
 
+  errorMessageTemplate: TemplateRef<any> = 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
@@ -12,6 +12,12 @@
           [placeholder]="label"
           readonly/>
     <mat-hint>{{hint}}</mat-hint>
+    <mat-error>
+      <ng-template
+        [ngTemplateOutlet]="errorMessageTemplate"
+        [ngTemplateOutletContext]="{control: control, errors: control?.errors}">
+      </ng-template>
+    </mat-error>
   </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
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, TemplateRef } from '@angular/core';
 import { FormControl } from '@angular/forms';
 
 @Component({
@@ -16,6 +16,8 @@ export class TdDynamicFileInputComponent {
 
   hint: string = '';
 
+  errorMessageTemplate: TemplateRef<any> = undefined;
+
   _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
@@ -11,5 +11,11 @@
             [attr.minLength]="minLength"
             [attr.maxLength]="maxLength"/>
     <mat-hint>{{hint}}</mat-hint>
+    <mat-error>
+      <ng-template
+        [ngTemplateOutlet]="errorMessageTemplate"
+        [ngTemplateOutletContext]="{control: control, errors: control?.errors}">
+      </ng-template>
+    </mat-error>
   </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
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, TemplateRef } from '@angular/core';
 import { FormControl } from '@angular/forms';
 
 @Component({
@@ -26,4 +26,6 @@ export class TdDynamicInputComponent {
 
   maxLength: number = undefined;
 
+  errorMessageTemplate: TemplateRef<any> = 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
@@ -6,5 +6,11 @@
       <mat-option *ngFor="let selection of selections" [value]="selection.value || selection">{{selection.label || selection}}</mat-option>
     </mat-select>
     <mat-hint>{{hint}}</mat-hint>
+    <mat-error>
+      <ng-template
+        [ngTemplateOutlet]="errorMessageTemplate"
+        [ngTemplateOutletContext]="{control: control, errors: control?.errors}">
+      </ng-template>
+    </mat-error>
   </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
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, TemplateRef } from '@angular/core';
 import { FormControl } from '@angular/forms';
 
 @Component({
@@ -18,4 +18,6 @@ export class TdDynamicSelectComponent {
 
   selections: any[] = undefined;
 
+  errorMessageTemplate: TemplateRef<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
@@ -8,5 +8,11 @@
             rows="4">
     </textarea>
     <mat-hint>{{hint}}</mat-hint>
+    <mat-error>
+      <ng-template
+        [ngTemplateOutlet]="errorMessageTemplate"
+        [ngTemplateOutletContext]="{control: control, errors: control?.errors}">
+      </ng-template>
+    </mat-error>
   </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
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, TemplateRef } from '@angular/core';
 import { FormControl } from '@angular/forms';
 
 @Component({
@@ -16,4 +16,6 @@ export class TdDynamicTextareaComponent {
 
   required: boolean = undefined;
 
+  errorMessageTemplate: TemplateRef<any> = undefined;
+
 }
diff --git a/src/platform/dynamic-forms/dynamic-forms.component.html b/src/platform/dynamic-forms/dynamic-forms.component.html
@@ -20,18 +20,9 @@
           [max]="element.max"
           [minLength]="element.minLength"
           [maxLength]="element.maxLength"
-          [selections]="element.selections">
+          [selections]="element.selections"
+          [errorMessageTemplate]="getErrorTemplateRef(element.name)">
         </td-dynamic-element>
-        <div class="tc-red-600"
-             [style.font-size.%]="'70'"
-             [style.position]="'absolute'"
-             [style.bottom.px]="'10'"
-              *ngIf="getErrorTemplateRef(element.name) && dynamicForm.controls[element.name]?.errors">
-          <ng-template
-            [ngTemplateOutlet]="getErrorTemplateRef(element.name)"
-            [ngTemplateOutletContext]="{control: dynamicForm.controls[element.name], errors: dynamicForm.controls[element.name]?.errors}">
-          </ng-template>
-        </div>
       </div>
     </ng-template>
   </div>