# @3kles/kles-material-dynamicforms **kles-material-dynamicforms** is a component library to build `Material Angular Form`. ## Changelog Check out the [changelog](./CHANGELOG.md) to check all the latest changes. ## Models ### Advanced CSS Grid layout Add `layout` to an individual root field to enable CSS Grid automatically. `direction="grid"` remains available to force it when no field declares a layout. The defaults are a 12-column grid, no gap, `colSpan: 12`, and `rowSpan: 1`. ```typescript const fields: KlesFormElement[] = [ { name: 'firstname', component: KlesFormInputComponent, layout: { colSpan: 6, responsive: { xs: { colSpan: 12 } } } }, { name: 'lastname', component: KlesFormInputComponent, layout: { colSpan: 6, responsive: { xs: { colSpan: 12 } } } }, { name: 'email', component: KlesFormInputComponent, layout: { colSpan: 12 } }, ]; ``` Configure the root with `[layout]="{ columns: 12, gap: '16px' }"`. Structural `section` and `layoutGroup` elements can contain nested `fields` and establish independent grids through `layoutConfig`; they do not create Angular form controls. `layoutGroup` is deliberately distinct from the existing data-bearing `EnumType.group`. The legacy `row`, `column`, `wrap`, and `EnumType.group` APIs are unchanged. ### 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\ | Observable\ | ((value?: string) => Observable\) -> 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>, 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 - 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 ```javascript import { KlesMaterialDynamicFormsModule } from '@3kles/kles-material-dynamicforms'; ... @NgModule({ imports: [ KlesMaterialDynamicFormsModule, ... ] ... }) ``` Check the [`documentation`](https://doc.3kles-consulting.com/#/material/dynamicforms) to use component and directive. ## Tests ``` npm install npm test ``` ## License [`MIT`](./LICENSE.md)