@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
- 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
