@3kles/kles-material-dynamicforms

kles-material-dynamicforms is a component library to build Material Angular Form.

Changelog

Check out the changelog to check all the latest changes.

Models

Directives

• KlesComponentDirective -> Directive to inject component with value
• KlesDynamicFieldDirective -> Directive to inject component with IFieldConfig in FormGroup

Interfaces

IKlesFieldConfig

Interface field model

• type?: string -> Mapper type if(type && !component)=>type
• name: string -> Name Field (key for FormControlName)
• component?: Type<any> -> Component field
• id?: string -> Attribut html id
• label?: string -> Label field
• placeholder?: string -> Placeholder field
• tooltip?: string -> Tooltip field
• inputType?: string -> Input type
• min?: number | Date -> Min value for number input or date field
• max?: number | Date -> Max value for number input or date field
• maxLength?: number -> Max length for input value
• step?: number -> Define a step for number input
• options?: any[] | Subject<any[]> | Observable<any[]> | ((value?: string) => Observable<any[]>) -> List options for list component
• ngClass?: any -> ngclass for field
• ngStyle?: any -> ngStyle for field
• property?: string -> Property for field
• collections?: any -> Collections for subfield
• value?: any -> Value field
• asyncValue?: Observable<any> -> Async value field
• multiple?: boolean -> Multiple selection field
• disabled?: boolean -> Disabled field
• autocomplete?: boolean -> Autocomplete input field
• autocompleteComponent?: Type<\any> -> Autocomplete component to display in list option
• displayWith?: ((value: any) => string) | null -> Autocomplete display format
• panelWidth?: string | number -> Width for panel list option
• indeterminate?: boolean -> Indeterminate checkable component
• color?: string -> Material color
• icon?: string -> Material icon
• iconSvg?: string -> Svg icon
• textareaAutoSize?: { minRows?: number; maxRows?: number } -> Define a min and max number of rows for text area
• validations?: IKlesValidator<ValidatorFn>[] -> Array of validators for a field
• asyncValidations?: IKlesValidator<AsyncValidatorFn>[] -> Array of async validators for a field
• pipeTransform?: { pipe: PipeTransform, options?: any[] }[] -> Array of pipe to apply to value field
• direction?: 'row' | 'column' -> Direction for the display of the fields
• valueChanges?: ((field: IKlesFieldConfig, group: UntypedFormGroup, siblingField?: IKlesFieldConfig[], valueChanged?: any) => void) -> Emit each time the value is changing
• triggerComponent?: Type<any> -> Trigger component to customize trigger label in select
• virtualScroll?: boolean -> To activate virtual scroll
• itemSize?: number -> Item size for virtual scroll
• pending?: boolean -> If the value is pending
• searchKeys?: string[] -> List of keys for multiple searches
• updateOn?: 'change' | 'blur' | 'submit' -> Set the update on diferent moment
• debounceTime?: number -> Time in milliseconds before emit value after changed
• directive?: (new (ref: ViewContainerRef, field: IKlesField) => IKlesDirective) -> Set a new directive to the field
• visible?: boolean -> Set if the field is visible
• lazy?: boolean -> Set if the field is lazy
• buttonType?: 'submit' | 'button' | 'reset' -> Define the type of a button
• accept?: string ->
• dateOptions?: { adapter?: { class: Type<DateAdapter<any>>, deps?: any[] }, language: string, dateFormat: MatDateFormats } -> Define options for date field
• hint?: string -> Display as a mat-hint for the field
• clearable?: boolean -> Display a cross to clear the field
• clearableComponent?: Type<any> -> Define a new clearable component
• subComponents?: Type<any>[] -> Define sub components of a field
• autofocus?: boolean -> Set the autofocus on the field
• attribute?: EnumButtonAttribute -> To display material button design
• subscriptSizing?: SubscriptSizing ->
• nonNullable?: boolean -> Set if the field can be null

Fields

• KlesFormArrayComponent component that creates a form array of other components
• KlesFormBadgeComponent component to display a badge
• KlesFormFabComponent component to display a fab button
• KlesFormButtonComponent component to display a button
• KlesFormIconButtonComponent component to display an icon button
• KlesFormMiniFabComponent component to display a mini fab button
• KlesFormButtonToogleGroupComponent component to display a button group toggle
• KlesFormButtonCheckerComponent component to check error in form
• KlesFormButtonFileComponent button that take a file
• KlesFormCheckboxComponent component to display a checkbox
• KlesFormChipComponent component to display a chip
• KlesFormClearComponent component to clear a form
• KlesFormColorComponent component to select a color
• KlesFormDateTimeComponent component to select a date with a time
• KlesFormDateComponent component to select a date
• KlesFieldAbstract abstract class to build field component
• KlesFormGroupComponent component that creates a form group of other components
• KlesFormIconComponent component to display a material icon
• KlesFormInputClearableComponent component with an input that is clearable
• KlesFormInputComponent component with an input
• KlesFormLineBreakComponent component to go to the next line
• KlesFormLinkComponent component that display a link
• KlesFormListFieldComponent component to display a list
• KlesFormRadioComponent component that display a material radio
• KlesFormRangeComponent component to select a date range
• KlesFormSelectComponent component to select a value in options
• KlesFormSelectLazySearchComponent component to select in lazy options that can be filtered
• KlesFormSelectSearchComponent component to select a value in options that can be filtered
• KlesFormSelectionListComponent component to create a list with elements that can be selected
• KlesFormSelectionListSearchComponent component to create a list with elements that can be selected and filtered
• KlesFormSlideToggleComponent component to display a group toggle
• KlesFormTextComponent component to display text
• KlesFormTextareaComponent component to display a text area

Install

npm

npm install @3kles/kles-material-dynamicforms --save

How to use

In the module

import { KlesMaterialDynamicFormsModule } from '@3kles/kles-material-dynamicforms';
...
@NgModule({
 imports: [
    KlesMaterialDynamicFormsModule,
    ...
 ]
 ...
})

Check the documentation to use component and directive.

Tests

npm install
npm test

License

MIT