@olafvv/ngx-dynamic-form 0.0.3 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (54) hide show
  1. package/esm2022/lib/components/dynamic-form/dynamic-form.component.mjs +21 -15
  2. package/esm2022/lib/components/dynamic-form-field/dynamic-form-field.component.mjs +22 -4
  3. package/esm2022/lib/controls/button/dynamic-button.component.mjs +3 -3
  4. package/esm2022/lib/controls/button-toggles/dynamic-button-toggles.component.mjs +28 -0
  5. package/esm2022/lib/controls/button-toggles/dynamic-button-toggles.model.mjs +13 -0
  6. package/esm2022/lib/controls/checkbox/dynamic-checkbox.component.mjs +5 -11
  7. package/esm2022/lib/controls/controls.mjs +9 -0
  8. package/esm2022/lib/controls/input/dynamic-input.component.mjs +12 -11
  9. package/esm2022/lib/controls/input/dynamic-input.model.mjs +2 -1
  10. package/esm2022/lib/controls/radio-group/dynamic-radio-group.component.mjs +27 -0
  11. package/esm2022/lib/controls/radio-group/dynamic-radio-group.model.mjs +11 -0
  12. package/esm2022/lib/controls/readonly/dynamic-readonly.component.mjs +3 -3
  13. package/esm2022/lib/controls/select/dynamic-select.component.mjs +5 -11
  14. package/esm2022/lib/controls/textarea/dynamic-textarea.component.mjs +12 -11
  15. package/esm2022/lib/models/classes/dynamic-form-field-base.mjs +28 -0
  16. package/esm2022/lib/models/classes/dynamic-form-field-model.mjs +1 -1
  17. package/esm2022/lib/models/constants/dynamic-relations.const.mjs +2 -15
  18. package/esm2022/lib/models/index.mjs +4 -3
  19. package/esm2022/lib/models/interfaces/dynamic-form-field-config.interface.mjs +1 -1
  20. package/esm2022/lib/models/interfaces/dynamic-form-field-event.interface.mjs +2 -0
  21. package/esm2022/lib/models/interfaces/dynamic-form-field-relation.interface.mjs +15 -0
  22. package/esm2022/lib/services/dynamic-form-relations.service.mjs +3 -2
  23. package/esm2022/lib/services/dynamic-form.service.mjs +12 -8
  24. package/esm2022/public-api.mjs +2 -2
  25. package/fesm2022/olafvv-ngx-dynamic-form.mjs +223 -148
  26. package/fesm2022/olafvv-ngx-dynamic-form.mjs.map +1 -1
  27. package/lib/components/dynamic-form/dynamic-form.component.d.ts +15 -9
  28. package/lib/components/dynamic-form-field/dynamic-form-field.component.d.ts +6 -2
  29. package/lib/controls/button/dynamic-button.component.d.ts +2 -2
  30. package/lib/controls/button-toggles/dynamic-button-toggles.component.d.ts +13 -0
  31. package/lib/controls/button-toggles/dynamic-button-toggles.model.d.ts +20 -0
  32. package/lib/controls/checkbox/dynamic-checkbox.component.d.ts +3 -5
  33. package/lib/controls/{index.d.ts → controls.d.ts} +2 -0
  34. package/lib/controls/input/dynamic-input.component.d.ts +6 -6
  35. package/lib/controls/input/dynamic-input.model.d.ts +2 -0
  36. package/lib/controls/radio-group/dynamic-radio-group.component.d.ts +13 -0
  37. package/lib/controls/radio-group/dynamic-radio-group.model.d.ts +14 -0
  38. package/lib/controls/readonly/dynamic-readonly.component.d.ts +2 -2
  39. package/lib/controls/select/dynamic-select.component.d.ts +5 -6
  40. package/lib/controls/textarea/dynamic-textarea.component.d.ts +6 -6
  41. package/lib/models/classes/{dynamic-form-field-base-component.d.ts → dynamic-form-field-base.d.ts} +2 -8
  42. package/lib/models/classes/dynamic-form-field-model.d.ts +2 -3
  43. package/lib/models/constants/dynamic-relations.const.d.ts +1 -29
  44. package/lib/models/index.d.ts +3 -2
  45. package/lib/models/interfaces/dynamic-form-field-config.interface.d.ts +4 -5
  46. package/lib/models/interfaces/dynamic-form-field-event.interface.d.ts +10 -0
  47. package/lib/models/interfaces/dynamic-form-field-relation.interface.d.ts +29 -0
  48. package/lib/services/dynamic-form.service.d.ts +12 -8
  49. package/package.json +1 -1
  50. package/public-api.d.ts +1 -1
  51. package/esm2022/lib/controls/index.mjs +0 -7
  52. package/esm2022/lib/models/classes/dynamic-form-field-base-component.mjs +0 -34
  53. package/esm2022/lib/models/types/dynamic-form-hook.type.mjs +0 -2
  54. package/lib/models/types/dynamic-form-hook.type.d.ts +0 -1
@@ -1,15 +1,13 @@
1
1
  import { EventEmitter } from '@angular/core';
2
2
  import { UntypedFormGroup } from '@angular/forms';
3
3
  import { MatCheckboxChange } from '@angular/material/checkbox';
4
- import { DynamicFormFieldBaseComponent } from '../../models/classes/dynamic-form-field-base-component';
4
+ import { DynamicFormFieldBase } from '../../models/classes/dynamic-form-field-base';
5
5
  import { DynamicCheckbox } from './dynamic-checkbox.model';
6
6
  import * as i0 from "@angular/core";
7
- export declare class DynamicCheckboxComponent extends DynamicFormFieldBaseComponent {
7
+ export declare class DynamicCheckboxComponent extends DynamicFormFieldBase {
8
8
  model: DynamicCheckbox;
9
9
  group: UntypedFormGroup;
10
- blur: EventEmitter<any>;
11
10
  change: EventEmitter<MatCheckboxChange>;
12
- focus: EventEmitter<any>;
13
11
  static ɵfac: i0.ɵɵFactoryDeclaration<DynamicCheckboxComponent, never>;
14
- static ɵcmp: i0.ɵɵComponentDeclaration<DynamicCheckboxComponent, "dynamic-checkbox", never, { "model": { "alias": "model"; "required": false; }; "group": { "alias": "group"; "required": false; }; }, { "blur": "blur"; "change": "change"; "focus": "focus"; }, never, never, true, never>;
12
+ static ɵcmp: i0.ɵɵComponentDeclaration<DynamicCheckboxComponent, "dynamic-checkbox", never, { "model": { "alias": "model"; "required": false; }; "group": { "alias": "group"; "required": false; }; }, { "change": "change"; }, never, never, true, never>;
15
13
  }
@@ -1,6 +1,8 @@
1
+ export * from './button-toggles/dynamic-button-toggles.model';
1
2
  export * from './button/dynamic-button.model';
2
3
  export * from './checkbox/dynamic-checkbox.model';
3
4
  export * from './input/dynamic-input.model';
5
+ export * from './radio-group/dynamic-radio-group.model';
4
6
  export * from './readonly/dynamic-readonly.model';
5
7
  export * from './select/dynamic-select.model';
6
8
  export * from './textarea/dynamic-textarea.model';
@@ -1,19 +1,19 @@
1
1
  import { EventEmitter } from '@angular/core';
2
2
  import { UntypedFormGroup } from '@angular/forms';
3
3
  import { MatInput } from '@angular/material/input';
4
- import { DynamicFormFieldBaseComponent } from '../../models/classes/dynamic-form-field-base-component';
4
+ import { DynamicFormFieldBase } from '../../models/classes/dynamic-form-field-base';
5
+ import { DynamicFormFieldEvent } from '../../models/interfaces/dynamic-form-field-event.interface';
5
6
  import { DynamicInput } from './dynamic-input.model';
6
7
  import * as i0 from "@angular/core";
7
- export declare class DynamicInputComponent extends DynamicFormFieldBaseComponent {
8
+ export declare class DynamicInputComponent extends DynamicFormFieldBase {
8
9
  input: MatInput;
9
10
  model: DynamicInput;
10
11
  group: UntypedFormGroup;
11
- blur: EventEmitter<any>;
12
- change: EventEmitter<any>;
13
- focus: EventEmitter<any>;
12
+ change: EventEmitter<DynamicFormFieldEvent>;
14
13
  get valueCount(): number;
15
14
  get maxCountText(): string;
16
15
  get showClear(): boolean;
16
+ onChange(event: Event | DynamicFormFieldEvent): void;
17
17
  static ɵfac: i0.ɵɵFactoryDeclaration<DynamicInputComponent, never>;
18
- static ɵcmp: i0.ɵɵComponentDeclaration<DynamicInputComponent, "dynamic-input", never, { "model": { "alias": "model"; "required": false; }; "group": { "alias": "group"; "required": false; }; }, { "blur": "blur"; "change": "change"; "focus": "focus"; }, never, never, true, never>;
18
+ static ɵcmp: i0.ɵɵComponentDeclaration<DynamicInputComponent, "dynamic-input", never, { "model": { "alias": "model"; "required": false; }; "group": { "alias": "group"; "required": false; }; }, { "change": "change"; }, never, never, true, never>;
19
19
  }
@@ -11,6 +11,7 @@ export interface DynamicInputConfig extends DynamicFormFieldValueConfig<string |
11
11
  pattern?: string | RegExp;
12
12
  autocomplete?: 'on' | 'off';
13
13
  prefix?: string;
14
+ hideClearIcon?: boolean;
14
15
  }
15
16
  export declare class DynamicInput extends DynamicFormFieldValueModel<string | number | Date | null> {
16
17
  inputType: HtmlInputType;
@@ -22,6 +23,7 @@ export declare class DynamicInput extends DynamicFormFieldValueModel<string | nu
22
23
  pattern: string | RegExp;
23
24
  autocomplete: 'on' | 'off';
24
25
  prefix: string | null;
26
+ hideClearIcon: boolean;
25
27
  readonly type = "input";
26
28
  constructor(config: DynamicInputConfig);
27
29
  }
@@ -0,0 +1,13 @@
1
+ import { EventEmitter } from '@angular/core';
2
+ import { UntypedFormGroup } from '@angular/forms';
3
+ import { MatRadioChange } from '@angular/material/radio';
4
+ import { DynamicFormFieldBase } from '../../models/classes/dynamic-form-field-base';
5
+ import { DynamicRadioGroup } from './dynamic-radio-group.model';
6
+ import * as i0 from "@angular/core";
7
+ export declare class DymamicRadioGroupComponent extends DynamicFormFieldBase {
8
+ model: DynamicRadioGroup;
9
+ group: UntypedFormGroup;
10
+ change: EventEmitter<MatRadioChange>;
11
+ static ɵfac: i0.ɵɵFactoryDeclaration<DymamicRadioGroupComponent, never>;
12
+ static ɵcmp: i0.ɵɵComponentDeclaration<DymamicRadioGroupComponent, "dynamic-radio-group", never, { "model": { "alias": "model"; "required": false; }; "group": { "alias": "group"; "required": false; }; }, { "change": "change"; }, never, never, true, never>;
13
+ }
@@ -0,0 +1,14 @@
1
+ import { DynamicFormFieldOptionConfig, DynamicFormFieldOptionModel } from '../../models/classes/dynamic-form-field-option-model';
2
+ export declare const DYNAMIC_FORM_FIELD_RADIO_GROUP = "radio-group";
3
+ export interface DynamicRadioGroupConfig extends DynamicFormFieldOptionConfig<string | number> {
4
+ /** Placement of the option label. Default is 'before' */
5
+ labelPosition?: 'before' | 'after';
6
+ /** Whether the options are shown inline (horizontally). Default is false */
7
+ inline?: boolean;
8
+ }
9
+ export declare class DynamicRadioGroup extends DynamicFormFieldOptionModel<string | number> {
10
+ labelPosition: 'before' | 'after';
11
+ inline: boolean;
12
+ readonly type: string;
13
+ constructor(config: DynamicRadioGroupConfig);
14
+ }
@@ -1,8 +1,8 @@
1
1
  import { UntypedFormGroup } from '@angular/forms';
2
- import { DynamicFormFieldBaseComponent } from '../../models/classes/dynamic-form-field-base-component';
2
+ import { DynamicFormFieldBase } from '../../models/classes/dynamic-form-field-base';
3
3
  import { DynamicReadonly } from './dynamic-readonly.model';
4
4
  import * as i0 from "@angular/core";
5
- export declare class DynamicReadonlyComponent extends DynamicFormFieldBaseComponent {
5
+ export declare class DynamicReadonlyComponent extends DynamicFormFieldBase {
6
6
  model: DynamicReadonly;
7
7
  group: UntypedFormGroup;
8
8
  static ɵfac: i0.ɵɵFactoryDeclaration<DynamicReadonlyComponent, never>;
@@ -1,16 +1,15 @@
1
1
  import { EventEmitter } from '@angular/core';
2
2
  import { UntypedFormGroup } from '@angular/forms';
3
- import { DynamicFormFieldBaseComponent } from '../../models/classes/dynamic-form-field-base-component';
3
+ import { MatSelectChange } from '@angular/material/select';
4
+ import { DynamicFormFieldBase } from '../../models/classes/dynamic-form-field-base';
4
5
  import { DynamicFormFieldOption } from '../../models/classes/dynamic-form-field-option-model';
5
6
  import { DynamicSelect } from './dynamic-select.model';
6
7
  import * as i0 from "@angular/core";
7
- export declare class DynamicSelectComponent extends DynamicFormFieldBaseComponent {
8
+ export declare class DynamicSelectComponent extends DynamicFormFieldBase {
8
9
  model: DynamicSelect<string>;
9
10
  group: UntypedFormGroup;
10
- blur: EventEmitter<any>;
11
- change: EventEmitter<any>;
12
- focus: EventEmitter<any>;
11
+ change: EventEmitter<MatSelectChange>;
13
12
  trackByFn(index: number, option: DynamicFormFieldOption<unknown>): unknown;
14
13
  static ɵfac: i0.ɵɵFactoryDeclaration<DynamicSelectComponent, never>;
15
- static ɵcmp: i0.ɵɵComponentDeclaration<DynamicSelectComponent, "dynamic-select", never, { "model": { "alias": "model"; "required": false; }; "group": { "alias": "group"; "required": false; }; }, { "blur": "blur"; "change": "change"; "focus": "focus"; }, never, never, true, never>;
14
+ static ɵcmp: i0.ɵɵComponentDeclaration<DynamicSelectComponent, "dynamic-select", never, { "model": { "alias": "model"; "required": false; }; "group": { "alias": "group"; "required": false; }; }, { "change": "change"; }, never, never, true, never>;
16
15
  }
@@ -1,18 +1,18 @@
1
1
  import { EventEmitter } from '@angular/core';
2
2
  import { UntypedFormGroup } from '@angular/forms';
3
3
  import { MatInput } from '@angular/material/input';
4
- import { DynamicFormFieldBaseComponent } from '../../models/classes/dynamic-form-field-base-component';
4
+ import { DynamicFormFieldBase } from '../../models/classes/dynamic-form-field-base';
5
+ import { DynamicFormFieldEvent } from '../../models/interfaces/dynamic-form-field-event.interface';
5
6
  import { DynamicTextarea } from './dynamic-textarea.model';
6
7
  import * as i0 from "@angular/core";
7
- export declare class DynamicTextareaComponent extends DynamicFormFieldBaseComponent {
8
+ export declare class DynamicTextareaComponent extends DynamicFormFieldBase {
8
9
  textarea: MatInput;
9
10
  model: DynamicTextarea;
10
11
  group: UntypedFormGroup;
11
- blur: EventEmitter<any>;
12
- change: EventEmitter<any>;
13
- focus: EventEmitter<any>;
12
+ change: EventEmitter<DynamicFormFieldEvent>;
14
13
  get valueCount(): number;
15
14
  get maxCountText(): string;
15
+ onChange(event: Event | DynamicFormFieldEvent): void;
16
16
  static ɵfac: i0.ɵɵFactoryDeclaration<DynamicTextareaComponent, never>;
17
- static ɵcmp: i0.ɵɵComponentDeclaration<DynamicTextareaComponent, "dynamic-textarea", never, { "model": { "alias": "model"; "required": false; }; "group": { "alias": "group"; "required": false; }; }, { "blur": "blur"; "change": "change"; "focus": "focus"; }, never, never, true, never>;
17
+ static ɵcmp: i0.ɵɵComponentDeclaration<DynamicTextareaComponent, "dynamic-textarea", never, { "model": { "alias": "model"; "required": false; }; "group": { "alias": "group"; "required": false; }; }, { "change": "change"; }, never, never, true, never>;
18
18
  }
@@ -4,23 +4,17 @@ import { DynamicFormFieldModel } from './dynamic-form-field-model';
4
4
  export interface DynamicFormField {
5
5
  group: UntypedFormGroup;
6
6
  model: DynamicFormFieldModel;
7
- blur: EventEmitter<any>;
8
7
  change: EventEmitter<any>;
9
- focus: EventEmitter<any>;
10
8
  }
11
- export declare abstract class DynamicFormFieldBaseComponent implements DynamicFormField {
9
+ export declare abstract class DynamicFormFieldBase implements DynamicFormField {
12
10
  group: UntypedFormGroup;
13
11
  model: DynamicFormFieldModel;
14
- blur: EventEmitter<any>;
15
12
  change: EventEmitter<any>;
16
- focus: EventEmitter<any>;
17
13
  get id(): string;
18
14
  get control(): AbstractControl;
19
15
  get isValid(): boolean;
20
16
  get isInvalid(): boolean;
21
- onBlur(ev: any): void;
22
- onChange(ev: any): void;
23
- onFocus(ev: any): void;
17
+ onChange(event: unknown): void;
24
18
  resetControl(): void;
25
19
  hasError(name: string): boolean;
26
20
  }
@@ -1,8 +1,7 @@
1
1
  import { Observable } from 'rxjs';
2
2
  import { DynamicFormFieldConfig } from '../interfaces/dynamic-form-field-config.interface';
3
- import { DynamicFormFieldRelation } from '../constants/dynamic-relations.const';
3
+ import { DynamicFormFieldRelation } from '../interfaces/dynamic-form-field-relation.interface';
4
4
  import { DynamicFormValidator } from '../interfaces/dynamic-form-validator.interface';
5
- import { DynamicFormHook } from '../types/dynamic-form-hook.type';
6
5
  export declare abstract class DynamicFormFieldModel {
7
6
  hidden: boolean;
8
7
  id: string;
@@ -11,7 +10,7 @@ export declare abstract class DynamicFormFieldModel {
11
10
  name: string;
12
11
  hint: string | null;
13
12
  validators: DynamicFormValidator[];
14
- updateOn: DynamicFormHook;
13
+ updateOn: 'submit' | 'blur' | 'change';
15
14
  relations: DynamicFormFieldRelation[] | null;
16
15
  disabledChange: Observable<boolean>;
17
16
  abstract readonly type: string;
@@ -1,30 +1,2 @@
1
- import { Injector } from '@angular/core';
2
- import { UntypedFormControl } from '@angular/forms';
3
- import { DynamicFormFieldModel } from '../classes/dynamic-form-field-model';
4
- export declare enum RelationActionType {
5
- DISABLED = "DISABLED",
6
- ENABLED = "ENABLED",
7
- HIDDEN = "HIDDEN",
8
- VISIBLE = "VISIBLE",
9
- REQUIRED = "REQUIRED",
10
- OPTIONAL = "OPTIONAL"
11
- }
12
- export declare enum RelationOperator {
13
- AND = "AND",
14
- OR = "OR"
15
- }
16
- export interface RelationCondition {
17
- fieldName: string;
18
- value: (val: any) => boolean;
19
- }
20
- export interface DynamicFormFieldRelation {
21
- actionType: RelationActionType;
22
- operator?: RelationOperator;
23
- conditions: RelationCondition[];
24
- }
25
- export interface DynamicRelationAction {
26
- type: RelationActionType;
27
- reversedType?: string;
28
- change(hasMatch: boolean, model: DynamicFormFieldModel, control: UntypedFormControl, injector: Injector): void;
29
- }
1
+ import { DynamicRelationAction } from '../interfaces/dynamic-form-field-relation.interface';
30
2
  export declare const RELATION_ACTIONS: DynamicRelationAction[];
@@ -1,10 +1,11 @@
1
- export * from './classes/dynamic-form-field-base-component';
1
+ export * from './classes/dynamic-form-field-base';
2
2
  export * from './classes/dynamic-form-field-model';
3
3
  export * from './classes/dynamic-form-field-option-model';
4
4
  export * from './classes/dynamic-form-field-value-model';
5
5
  export * from './classes/dynamic-form-validators';
6
- export * from './constants/dynamic-relations.const';
7
6
  export * from './interfaces/dynamic-form-field-config.interface';
7
+ export * from './interfaces/dynamic-form-field-event.interface';
8
+ export * from './interfaces/dynamic-form-field-relation.interface';
8
9
  export * from './interfaces/dynamic-form-validator.interface';
9
10
  export * from './types/dynamic-form-config.type';
10
11
  export * from './tokens/dynamic-form-field-map-fn.token';
@@ -1,5 +1,4 @@
1
- import { DynamicFormFieldRelation } from '../constants/dynamic-relations.const';
2
- import { DynamicFormHook } from '../types/dynamic-form-hook.type';
1
+ import { DynamicFormFieldRelation } from './dynamic-form-field-relation.interface';
3
2
  import { DynamicFormValidator } from './dynamic-form-validator.interface';
4
3
  export interface DynamicFormFieldConfig {
5
4
  /**
@@ -52,9 +51,9 @@ export interface DynamicFormFieldConfig {
52
51
  relations?: DynamicFormFieldRelation[];
53
52
  /**
54
53
  * Event name for the control to update on.
55
- * Possible values: 'update', 'blur' or 'submit'.
56
- * Default values is 'update'
54
+ * Possible values: 'change', 'blur' or 'submit'.
55
+ * Default values is 'blur'
57
56
  * @optional
58
57
  */
59
- updateOn?: DynamicFormHook;
58
+ updateOn?: 'submit' | 'blur' | 'change';
60
59
  }
@@ -0,0 +1,10 @@
1
+ import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
2
+ import { DynamicFormFieldModel } from '../classes/dynamic-form-field-model';
3
+ export interface DynamicFormFieldEvent {
4
+ event: unknown;
5
+ control: UntypedFormControl;
6
+ form: UntypedFormGroup;
7
+ model: DynamicFormFieldModel;
8
+ type: DynamicFormFieldEventType;
9
+ }
10
+ export type DynamicFormFieldEventType = 'change' | 'blur' | 'focus';
@@ -0,0 +1,29 @@
1
+ import { Injector } from '@angular/core';
2
+ import { UntypedFormControl } from '@angular/forms';
3
+ import { DynamicFormFieldModel } from '../classes/dynamic-form-field-model';
4
+ export declare enum RelationActionType {
5
+ DISABLED = "DISABLED",
6
+ ENABLED = "ENABLED",
7
+ HIDDEN = "HIDDEN",
8
+ VISIBLE = "VISIBLE",
9
+ REQUIRED = "REQUIRED",
10
+ OPTIONAL = "OPTIONAL"
11
+ }
12
+ export declare enum RelationOperator {
13
+ AND = "AND",
14
+ OR = "OR"
15
+ }
16
+ export interface RelationCondition {
17
+ fieldName: string;
18
+ value: (val: any) => boolean;
19
+ }
20
+ export interface DynamicFormFieldRelation {
21
+ actionType: RelationActionType;
22
+ operator?: RelationOperator;
23
+ conditions: RelationCondition[];
24
+ }
25
+ export interface DynamicRelationAction {
26
+ type: RelationActionType;
27
+ reversedType?: string;
28
+ change(hasMatch: boolean, model: DynamicFormFieldModel, control: UntypedFormControl, injector: Injector): void;
29
+ }
@@ -1,7 +1,7 @@
1
1
  import { Type } from '@angular/core';
2
2
  import { FormBuilder, UntypedFormGroup } from '@angular/forms';
3
3
  import { Observable } from 'rxjs';
4
- import { DynamicFormField } from '../models/classes/dynamic-form-field-base-component';
4
+ import { DynamicFormField } from '../models/classes/dynamic-form-field-base';
5
5
  import { DynamicFormFieldModel } from '../models/classes/dynamic-form-field-model';
6
6
  import { DynamicFormFieldOption } from '../models/classes/dynamic-form-field-option-model';
7
7
  import { DynamicFormConfig } from '../models/types/dynamic-form-config.type';
@@ -22,18 +22,22 @@ export declare class DynamicFormService {
22
22
  /**
23
23
  * Create a FormGroup from the provided form configuration.
24
24
  * Returns a FormGroup.
25
- * @param config
26
- * @returns
25
+ * @param {DynamicFormConfig} config Configuration object of a form
26
+ * @returns {UntypedFormGroup}
27
27
  */
28
28
  createFormGroup(config: DynamicFormConfig): UntypedFormGroup;
29
29
  /**
30
30
  * Transform any list (Observable) to a list of DynamicFormFieldOption which is used in any Dynamic Form Field with options (e.g. DynamicSelect).
31
+ * Possible to provide the method with Type definitions to define the provided list type and desired option value type:
32
+ *
33
+ * `dynamicFormService.toDynamicOptionList<T, K>(...)`
34
+ *
31
35
  * Generic types:
32
- * T = The type of the items in the provided list
33
- * K = The type of the value inside an DynamicFormFieldOption
34
- * @param listObs
35
- * @param labelCb
36
- * @param valueCb
36
+ * - T = The type of the items in the provided list
37
+ * - K = The type of the value inside an DynamicFormFieldOption. Default is 'string'
38
+ * @param listObs An Observable of a list of items of type T
39
+ * @param labelCb Callback to define the label of the options in the template
40
+ * @param valueCb Callback to define the value of the options. Must return a value of type K (default string)
37
41
  * @returns
38
42
  */
39
43
  toDynamicOptionListObs<T, K = string>(listObs: Observable<T[]>, labelCb: (item: T) => string, valueCb: (item: T) => K): Observable<DynamicFormFieldOption<K>[]>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@olafvv/ngx-dynamic-form",
3
- "version": "0.0.3",
3
+ "version": "0.2.0",
4
4
  "peerDependencies": {
5
5
  "@angular/common": "^16.2.12",
6
6
  "@angular/core": "^16.2.12",
package/public-api.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  export * from './lib/components/dynamic-form/dynamic-form.component';
2
- export * from './lib/controls';
2
+ export * from './lib/controls/controls';
3
3
  export * from './lib/models';
4
4
  export * from './lib/services/dynamic-form.service';
@@ -1,7 +0,0 @@
1
- export * from './button/dynamic-button.model';
2
- export * from './checkbox/dynamic-checkbox.model';
3
- export * from './input/dynamic-input.model';
4
- export * from './readonly/dynamic-readonly.model';
5
- export * from './select/dynamic-select.model';
6
- export * from './textarea/dynamic-textarea.model';
7
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtZHluYW1pYy1mb3JtL3NyYy9saWIvY29udHJvbHMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYywrQkFBK0IsQ0FBQztBQUM5QyxjQUFjLG1DQUFtQyxDQUFDO0FBQ2xELGNBQWMsNkJBQTZCLENBQUM7QUFDNUMsY0FBYyxtQ0FBbUMsQ0FBQztBQUNsRCxjQUFjLCtCQUErQixDQUFDO0FBQzlDLGNBQWMsbUNBQW1DLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgKiBmcm9tICcuL2J1dHRvbi9keW5hbWljLWJ1dHRvbi5tb2RlbCc7XG5leHBvcnQgKiBmcm9tICcuL2NoZWNrYm94L2R5bmFtaWMtY2hlY2tib3gubW9kZWwnO1xuZXhwb3J0ICogZnJvbSAnLi9pbnB1dC9keW5hbWljLWlucHV0Lm1vZGVsJztcbmV4cG9ydCAqIGZyb20gJy4vcmVhZG9ubHkvZHluYW1pYy1yZWFkb25seS5tb2RlbCc7XG5leHBvcnQgKiBmcm9tICcuL3NlbGVjdC9keW5hbWljLXNlbGVjdC5tb2RlbCc7XG5leHBvcnQgKiBmcm9tICcuL3RleHRhcmVhL2R5bmFtaWMtdGV4dGFyZWEubW9kZWwnO1xuIl19
@@ -1,34 +0,0 @@
1
- export class DynamicFormFieldBaseComponent {
2
- get id() {
3
- return this.model.id ?? this.model.name;
4
- }
5
- get control() {
6
- const ctrl = this.group.get(this.model.name);
7
- if (!ctrl) {
8
- throw new Error(`Provided FormGroup does not contain a control with the name ${this.model.name}`);
9
- }
10
- return ctrl;
11
- }
12
- get isValid() {
13
- return this.control.valid;
14
- }
15
- get isInvalid() {
16
- return this.control.invalid;
17
- }
18
- onBlur(ev) {
19
- this.blur.emit(ev);
20
- }
21
- onChange(ev) {
22
- this.change.emit(ev);
23
- }
24
- onFocus(ev) {
25
- this.focus.emit(ev);
26
- }
27
- resetControl() {
28
- this.group.get(this.model.name)?.reset();
29
- }
30
- hasError(name) {
31
- return this.control.hasError(name);
32
- }
33
- }
34
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHluYW1pYy1mb3JtLWZpZWxkLWJhc2UtY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWR5bmFtaWMtZm9ybS9zcmMvbGliL21vZGVscy9jbGFzc2VzL2R5bmFtaWMtZm9ybS1maWVsZC1iYXNlLWNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFZQSxNQUFNLE9BQWdCLDZCQUE2QjtJQVFqRCxJQUFJLEVBQUU7UUFDSixPQUFPLElBQUksQ0FBQyxLQUFLLENBQUMsRUFBRSxJQUFJLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDO0lBQzFDLENBQUM7SUFFRCxJQUFJLE9BQU87UUFDVCxNQUFNLElBQUksR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxDQUFDO1FBRTdDLElBQUksQ0FBQyxJQUFJLEVBQUU7WUFDVCxNQUFNLElBQUksS0FBSyxDQUFDLCtEQUErRCxJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksRUFBRSxDQUFDLENBQUM7U0FDbkc7UUFDRCxPQUFPLElBQUksQ0FBQztJQUNkLENBQUM7SUFFRCxJQUFJLE9BQU87UUFDVCxPQUFPLElBQUksQ0FBQyxPQUFPLENBQUMsS0FBSyxDQUFDO0lBQzVCLENBQUM7SUFFRCxJQUFJLFNBQVM7UUFDWCxPQUFPLElBQUksQ0FBQyxPQUFPLENBQUMsT0FBTyxDQUFDO0lBQzlCLENBQUM7SUFFTSxNQUFNLENBQUMsRUFBTztRQUNuQixJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsQ0FBQztJQUNyQixDQUFDO0lBRU0sUUFBUSxDQUFDLEVBQU87UUFDckIsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLENBQUM7SUFDdkIsQ0FBQztJQUVNLE9BQU8sQ0FBQyxFQUFPO1FBQ3BCLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxDQUFDO0lBQ3RCLENBQUM7SUFFTSxZQUFZO1FBQ2pCLElBQUksQ0FBQyxLQUFLLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLEVBQUUsS0FBSyxFQUFFLENBQUM7SUFDM0MsQ0FBQztJQUVNLFFBQVEsQ0FBQyxJQUFZO1FBQzFCLE9BQU8sSUFBSSxDQUFDLE9BQU8sQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDckMsQ0FBQztDQUNGIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgRXZlbnRFbWl0dGVyIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBBYnN0cmFjdENvbnRyb2wsIFVudHlwZWRGb3JtR3JvdXAgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQgeyBEeW5hbWljRm9ybUZpZWxkTW9kZWwgfSBmcm9tICcuL2R5bmFtaWMtZm9ybS1maWVsZC1tb2RlbCc7XG5cbmV4cG9ydCBpbnRlcmZhY2UgRHluYW1pY0Zvcm1GaWVsZCB7XG4gIGdyb3VwOiBVbnR5cGVkRm9ybUdyb3VwO1xuICBtb2RlbDogRHluYW1pY0Zvcm1GaWVsZE1vZGVsO1xuICBibHVyOiBFdmVudEVtaXR0ZXI8YW55PjtcbiAgY2hhbmdlOiBFdmVudEVtaXR0ZXI8YW55PjtcbiAgZm9jdXM6IEV2ZW50RW1pdHRlcjxhbnk+O1xufVxuXG5leHBvcnQgYWJzdHJhY3QgY2xhc3MgRHluYW1pY0Zvcm1GaWVsZEJhc2VDb21wb25lbnQgaW1wbGVtZW50cyBEeW5hbWljRm9ybUZpZWxkIHtcbiAgZ3JvdXAhOiBVbnR5cGVkRm9ybUdyb3VwO1xuICBtb2RlbCE6IER5bmFtaWNGb3JtRmllbGRNb2RlbDtcblxuICBibHVyITogRXZlbnRFbWl0dGVyPGFueT47XG4gIGNoYW5nZSE6IEV2ZW50RW1pdHRlcjxhbnk+O1xuICBmb2N1cyE6IEV2ZW50RW1pdHRlcjxhbnk+O1xuXG4gIGdldCBpZCgpOiBzdHJpbmcge1xuICAgIHJldHVybiB0aGlzLm1vZGVsLmlkID8/IHRoaXMubW9kZWwubmFtZTtcbiAgfVxuXG4gIGdldCBjb250cm9sKCk6IEFic3RyYWN0Q29udHJvbCB7XG4gICAgY29uc3QgY3RybCA9IHRoaXMuZ3JvdXAuZ2V0KHRoaXMubW9kZWwubmFtZSk7XG5cbiAgICBpZiAoIWN0cmwpIHtcbiAgICAgIHRocm93IG5ldyBFcnJvcihgUHJvdmlkZWQgRm9ybUdyb3VwIGRvZXMgbm90IGNvbnRhaW4gYSBjb250cm9sIHdpdGggdGhlIG5hbWUgJHt0aGlzLm1vZGVsLm5hbWV9YCk7XG4gICAgfVxuICAgIHJldHVybiBjdHJsO1xuICB9XG5cbiAgZ2V0IGlzVmFsaWQoKTogYm9vbGVhbiB7XG4gICAgcmV0dXJuIHRoaXMuY29udHJvbC52YWxpZDtcbiAgfVxuXG4gIGdldCBpc0ludmFsaWQoKTogYm9vbGVhbiB7XG4gICAgcmV0dXJuIHRoaXMuY29udHJvbC5pbnZhbGlkO1xuICB9XG5cbiAgcHVibGljIG9uQmx1cihldjogYW55KSB7XG4gICAgdGhpcy5ibHVyLmVtaXQoZXYpO1xuICB9XG5cbiAgcHVibGljIG9uQ2hhbmdlKGV2OiBhbnkpIHtcbiAgICB0aGlzLmNoYW5nZS5lbWl0KGV2KTtcbiAgfVxuXG4gIHB1YmxpYyBvbkZvY3VzKGV2OiBhbnkpIHtcbiAgICB0aGlzLmZvY3VzLmVtaXQoZXYpO1xuICB9XG5cbiAgcHVibGljIHJlc2V0Q29udHJvbCgpIHtcbiAgICB0aGlzLmdyb3VwLmdldCh0aGlzLm1vZGVsLm5hbWUpPy5yZXNldCgpO1xuICB9XG5cbiAgcHVibGljIGhhc0Vycm9yKG5hbWU6IHN0cmluZyk6IGJvb2xlYW4ge1xuICAgIHJldHVybiB0aGlzLmNvbnRyb2wuaGFzRXJyb3IobmFtZSk7XG4gIH1cbn1cbiJdfQ==
@@ -1,2 +0,0 @@
1
- export {};
2
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHluYW1pYy1mb3JtLWhvb2sudHlwZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1keW5hbWljLWZvcm0vc3JjL2xpYi9tb2RlbHMvdHlwZXMvZHluYW1pYy1mb3JtLWhvb2sudHlwZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IHR5cGUgRHluYW1pY0Zvcm1Ib29rID0gJ3N1Ym1pdCcgfCAnYmx1cicgfCAnY2hhbmdlJztcbiJdfQ==
@@ -1 +0,0 @@
1
- export type DynamicFormHook = 'submit' | 'blur' | 'change';