-
-
-
+
\ No newline at end of file
diff --git a/src/platform/dynamic-forms/dynamic-elements/dynamic-slider/dynamic-slider.component.scss b/src/platform/dynamic-forms/dynamic-elements/dynamic-slider/dynamic-slider.component.scss
index 955d9c6a45..e7b7b2d720 100644
--- a/src/platform/dynamic-forms/dynamic-elements/dynamic-slider/dynamic-slider.component.scss
+++ b/src/platform/dynamic-forms/dynamic-elements/dynamic-slider/dynamic-slider.component.scss
@@ -1,6 +1,10 @@
+:host {
+ .td-dynamic-slider-wrapper {
+ display: block;
+ }
+}
.td-dynamic-slider-field {
position: relative;
- margin-top: 8px;
// [layout="row"]
flex-direction: row;
// [layout]
diff --git a/src/platform/dynamic-forms/dynamic-elements/dynamic-slider/dynamic-slider.component.ts b/src/platform/dynamic-forms/dynamic-elements/dynamic-slider/dynamic-slider.component.ts
index ad02821645..e72e55c370 100644
--- a/src/platform/dynamic-forms/dynamic-elements/dynamic-slider/dynamic-slider.component.ts
+++ b/src/platform/dynamic-forms/dynamic-elements/dynamic-slider/dynamic-slider.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, ChangeDetectorRef } from '@angular/core';
import { FormControl } from '@angular/forms';
@Component({
@@ -18,4 +18,11 @@ export class TdDynamicSliderComponent {
max: number = undefined;
+ constructor(private _changeDetectorRef: ChangeDetectorRef) {}
+
+ _handleBlur(): void {
+ setTimeout(() => {
+ this._changeDetectorRef.markForCheck();
+ });
+ }
}
diff --git a/src/platform/dynamic-forms/dynamic-forms.component.scss b/src/platform/dynamic-forms/dynamic-forms.component.scss
index aab3fee3f1..c001201342 100644
--- a/src/platform/dynamic-forms/dynamic-forms.component.scss
+++ b/src/platform/dynamic-forms/dynamic-forms.component.scss
@@ -1,4 +1,9 @@
.td-dynamic-form-wrapper {
+ ::ng-deep {
+ .mat-form-field-infix {
+ width: auto;
+ }
+ }
// [layout-wrap]
flex-wrap: wrap;
// [layout]
diff --git a/src/platform/dynamic-forms/dynamic-forms.component.spec.ts b/src/platform/dynamic-forms/dynamic-forms.component.spec.ts
index b4a5372828..d8f15c261c 100644
--- a/src/platform/dynamic-forms/dynamic-forms.component.spec.ts
+++ b/src/platform/dynamic-forms/dynamic-forms.component.spec.ts
@@ -100,7 +100,7 @@ describe('Component: TdDynamicForms', () => {
fixture.debugElement.query(By.directive(TdDynamicFormsComponent)).componentInstance;
expect(dynamicFormsComponent.valid).toBeFalsy();
/* tslint:disable-next-line */
- expect(JSON.stringify(dynamicFormsComponent.value)).toBe(JSON.stringify({first_name: null, on_it: true}));
+ expect(JSON.stringify(dynamicFormsComponent.value)).toBe(JSON.stringify({on_it: true}));
});
})));
@@ -127,7 +127,7 @@ describe('Component: TdDynamicForms', () => {
fixture.debugElement.query(By.directive(TdDynamicFormsComponent)).componentInstance;
expect(dynamicFormsComponent.valid).toBeFalsy();
/* tslint:disable-next-line */
- expect(JSON.stringify(dynamicFormsComponent.value)).toBe(JSON.stringify({first_name: null, age: 17}));
+ expect(JSON.stringify(dynamicFormsComponent.value)).toBe(JSON.stringify({age: 17}));
});
})));
@@ -319,8 +319,34 @@ describe('Component: TdDynamicForms', () => {
});
})));
- it('should render dynamic custom element', async(inject([], () => {
+ it('should render dynamic elements with one element disabled', async(inject([], () => {
+ let fixture: ComponentFixture
= TestBed.createComponent(TdDynamicFormsTestComponent);
+ let component: TdDynamicFormsTestComponent = fixture.debugElement.componentInstance;
+ expect(fixture.debugElement.queryAll(By.directive(TdDynamicElementComponent)).length).toBe(0);
+ component.elements = [{
+ name: 'hexColor',
+ type: TdDynamicType.Text,
+ required: true,
+ default: '#F1F1F1',
+ }, {
+ name: 'number',
+ type: TdDynamicType.Number,
+ disabled: true,
+ required: true,
+ }];
+ fixture.detectChanges();
+ fixture.whenStable().then(() => {
+ expect(fixture.debugElement.queryAll(By.directive(TdDynamicElementComponent)).length).toBe(2);
+ 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'}));
+ });
+ })));
+
+ it('should render dynamic custom element', async(inject([], () => {
let fixture: ComponentFixture = TestBed.createComponent(TdDynamicFormsTestComponent);
let component: TdDynamicFormsTestComponent = fixture.debugElement.componentInstance;
diff --git a/src/platform/dynamic-forms/dynamic-forms.component.ts b/src/platform/dynamic-forms/dynamic-forms.component.ts
index 25cc89cc9f..6e4637c235 100644
--- a/src/platform/dynamic-forms/dynamic-forms.component.ts
+++ b/src/platform/dynamic-forms/dynamic-forms.component.ts
@@ -138,10 +138,19 @@ export class TdDynamicFormsComponent implements AfterContentInit {
throw new Error(`Dynamic element name: "${elem.name}" is duplicated`);
}
duplicates.push(elem.name);
- if (!this.dynamicForm.get(elem.name)) {
+ let dynamicElement: AbstractControl = this.dynamicForm.get(elem.name);
+ if (!dynamicElement) {
this.dynamicForm.addControl(elem.name, this._dynamicFormsService.createFormControl(elem));
} else {
- this.dynamicForm.get(elem.name).setValidators(this._dynamicFormsService.createValidators(elem));
+ dynamicElement.setValue(elem.default);
+ dynamicElement.markAsPristine();
+ dynamicElement.markAsUntouched();
+ if (elem.disabled) {
+ dynamicElement.disable();
+ } else {
+ dynamicElement.enable();
+ }
+ dynamicElement.setValidators(this._dynamicFormsService.createValidators(elem));
}
// copy objects so they are only changes when calling this method
this._renderedElements.push(Object.assign({}, elem));
diff --git a/src/platform/dynamic-forms/services/dynamic-forms.service.ts b/src/platform/dynamic-forms/services/dynamic-forms.service.ts
index e7f104f63a..f576c5646e 100644
--- a/src/platform/dynamic-forms/services/dynamic-forms.service.ts
+++ b/src/platform/dynamic-forms/services/dynamic-forms.service.ts
@@ -40,6 +40,7 @@ export interface ITdDynamicElementConfig {
hint?: string;
type: TdDynamicType | TdDynamicElement | Type;
required?: boolean;
+ disabled?: boolean;
min?: any;
max?: any;
minLength?: any;
@@ -104,7 +105,7 @@ export class TdDynamicFormsService {
*/
createFormControl(config: ITdDynamicElementConfig): FormControl {
let validator: ValidatorFn = this.createValidators(config);
- return new FormControl(config.default, validator);
+ return new FormControl({ value: config.default, disabled: config.disabled }, validator);
}
/**