diff --git a/src/app/components/components/dynamic-forms/dynamic-forms.component.html b/src/app/components/components/dynamic-forms/dynamic-forms.component.html
index c3c70f23b4..2b75925083 100644
--- 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 @@
Custom Dynamic Elements
Demo
+
+
+
+ No more than 2 chips
+
+
+
@@ -546,12 +553,20 @@ Setup
Custom Component:
`,
+ template: `
+
+
+
+
`,
})
export class TdTestDynamicComponent {
@@ -561,6 +576,9 @@ Setup
/* 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;
+
}
]]>
@@ -590,6 +608,13 @@ Usage:
+
+
+
+ No more than 2 chips
+
+
+
]]>
@@ -602,6 +627,12 @@ Usage:
default: ['list1'],
selections: ['list1', 'list2', 'list3'],
flex: 100,
+ validators: [{
+ validator: (control: AbstractControl) => {
+ let isValid: boolean = control.value.length <= 2;
+ return !isValid ? {invalidChips: true} : undefined;
+ },
+ }],
}];
]]>
diff --git a/src/app/components/components/dynamic-forms/dynamic-forms.component.ts b/src/app/components/components/dynamic-forms/dynamic-forms.component.ts
index d003c7a235..8b58522294 100644
--- 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: ` `,
+ template: `
+
+
+
+
`,
})
export class TdTestDynamicComponent {
control: FormControl;
selections: string[] = [];
+ errorMessageTemplate: TemplateRef;
}
@@ -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
index 18c0969b1c..4455c70a60 100644
--- 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}} ',
+ template: `{{label}}
+
+
+
+
+
`,
})
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;
}
...
})
@@ -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
index 4f996b08fd..7a71601645 100644
--- 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 = 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/src/platform/dynamic-forms/dynamic-elements/dynamic-datepicker/dynamic-datepicker.component.html b/src/platform/dynamic-forms/dynamic-elements/dynamic-datepicker/dynamic-datepicker.component.html
index 4c72c4065f..9d607e4e0b 100644
--- a/src/platform/dynamic-forms/dynamic-elements/dynamic-datepicker/dynamic-datepicker.component.html
+++ b/src/platform/dynamic-forms/dynamic-elements/dynamic-datepicker/dynamic-datepicker.component.html
@@ -9,6 +9,12 @@
[min]="min"
[max]="max"/>
{{hint}}
+
+
+
+
diff --git a/src/platform/dynamic-forms/dynamic-elements/dynamic-datepicker/dynamic-datepicker.component.ts b/src/platform/dynamic-forms/dynamic-elements/dynamic-datepicker/dynamic-datepicker.component.ts
index d691a67f0d..9ed4bc4f0d 100644
--- a/src/platform/dynamic-forms/dynamic-elements/dynamic-datepicker/dynamic-datepicker.component.ts
+++ b/src/platform/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 = undefined;
+
}
diff --git a/src/platform/dynamic-forms/dynamic-elements/dynamic-file-input/dynamic-file-input.component.html b/src/platform/dynamic-forms/dynamic-elements/dynamic-file-input/dynamic-file-input.component.html
index 7fc1d855d0..0238421b9a 100644
--- a/src/platform/dynamic-forms/dynamic-elements/dynamic-file-input/dynamic-file-input.component.html
+++ b/src/platform/dynamic-forms/dynamic-elements/dynamic-file-input/dynamic-file-input.component.html
@@ -12,6 +12,12 @@
[placeholder]="label"
readonly/>
{{hint}}
+
+
+
+
cancel
diff --git a/src/platform/dynamic-forms/dynamic-elements/dynamic-file-input/dynamic-file-input.component.ts b/src/platform/dynamic-forms/dynamic-elements/dynamic-file-input/dynamic-file-input.component.ts
index df3c5f9076..0d3f6df996 100644
--- a/src/platform/dynamic-forms/dynamic-elements/dynamic-file-input/dynamic-file-input.component.ts
+++ b/src/platform/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 = 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
index 8e987832ae..8f732cb61f 100644
--- 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"/>
{{hint}}
+
+
+
+
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
index 21d54fa2e8..4eda09ac20 100644
--- 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 = 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
index 392a2c9d19..74aadd5b38 100644
--- 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 @@
{{selection.label || selection}}
{{hint}}
+
+
+
+
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
index c3364dbbe7..0716235eca 100644
--- 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 = 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
index 6dbac9d953..7d91d91554 100644
--- 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">
{{hint}}
+
+
+
+
\ No newline at end of file
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
index 6e9038230d..06580c85e3 100644
--- 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 = undefined;
+
}
diff --git a/src/platform/dynamic-forms/dynamic-forms.component.html b/src/platform/dynamic-forms/dynamic-forms.component.html
index 4cca40ecfd..dc2c8233c2 100644
--- 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)">
-
-
-
-