td-dynamic-forms

API Summary

#### Inputs

- elements: ITdDynamicElementConfig[]
- JS Object that will render the elements depending on its config.
- [name] property is required.

#### Properties (Read only)

- form: FormGroup
- Getter property for dynamic [FormGroup].
- valid: boolean
- Getter property for [valid] of dynamic [FormGroup].
- value: any
- Getter property for [value] of dynamic [FormGroup].
- errors: {[name: string]: any}
- Getter property for [errors] of dynamic [FormGroup].
- controls: {[key: string]: AbstractControl}
- Getter property for [controls] of dynamic [FormGroup].

#### Methods

- refresh: function
- Refreshes the form and rerenders all validator/element modifications

Setup

Import the [CovalentDynamicFormsModule] in your NgModule:

``typescript
import { CovalentDynamicFormsModule } from '@covalent/dynamic-forms';
@NgModule({
imports: [
CovalentDynamicFormsModule,
...
],
...
})
export class MyModule {}
`

Usage

td-dynamic-forms element generates a form dynamically

Pass an array of javascript objects that implement [ITdDynamicElementConfig] with the information to be rendered to the [elements] attribute.

`typescript
// Property values to be set in custom component
export interface ITdDynamicElementCustomConfig {
[name: string]: any;
}

export interface ITdDynamicElementConfig {
label?: string;
name: string;
hint?: string;
type: TdDynamicType | TdDynamicElement | Type;
required = false;
disabled?: boolean;
min?: any;
max?: any;
minLength?: any;
maxLength?: any;
selections?: string[] | { value: any; label: string }[];
multiple?: boolean;
default?: any;
flex?: number;
validators?: ITdDynamicElementValidator[];
customConfig?: ITdDynamicElementCustomConfig;
}
`

NOTE: For custom types, you need to implement a [control] property and use it in your underlying element.

Example for HTML usage:

`html




Required
Min value: {{element.min}}
Max value: {{element.max}}
>Min length value: {{element.minLength}} >
>Max length value: {{element.minLength}} >




`

`typescript
import { ITdDynamicElementConfig, TdDynamicElement, TdDynamicType } from '@covalent/dynamic-forms';
...
/ CUSTOM TYPE /
template: {{label}}

/ map the error message template and use it anywhere you need to /
errorMessageTemplate: TemplateRef;
}
...
})
export class Demo {
elements: ITdDynamicElementConfig[] = [{
name: 'input',
hint: 'hint',
type: TdDynamicElement.Input,
required: true,
}, {
name: 'textLength',
label: 'Text Length',
type: TdDynamicElement.Input,
minLength: 4,
maxLength: 12,
}, {
name: 'number',
type: TdDynamicType.Number,
min: 10,
max: 80,
}, {
name: 'slider',
label: 'Label',
type: TdDynamicElement.Slider,
required: true,
}, {
name: 'boolean',
type: TdDynamicType.Boolean,
default: false,
disabled: true,
}, {
name: 'select',
type: TdDynamicElement.Select,
required: true,
multiple: false,
selections: ['A','B','C'],
default: 'A',
}, {
name: 'file-input',
label: 'Label',
type: TdDynamicElement.FileInput,
}, {
name: 'datepicker',
label: 'Date',
type: TdDynamicElement.Datepicker,
}, {
name: 'custom',
label: 'Custom',
type: DynamicCustomComponent,
required: true,
}];
}
`

Note: To use the datepicker you need to provide an implementation of DateAdapter.. click [here] for more information on the material datepicker(https://material.angular.io/components/datepicker/overview#choosing-a-date-implementation-and-date-format-settings)

Running unit tests

Run nx test angular-dynamic-forms` to execute the unit tests.