@3kles/kles-material-dynamicforms NPM

@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\ -> 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\ -> 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\[] -> Array of validators for a field
asyncValidations?: IKlesValidator\[] -> 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\ -> 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\>, 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\ -> Define a new clearable component
subComponents?: Type\[] -> 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.