@ng-modular-forms/core 0.7.0 → 0.7.2

package/README.md

@@ -6,11 +6,7 @@ Core primitives, behaviors, and input components for orchestrating complex Angul
 
 ```bash
 npm install @ng-modular-forms/core
-```
-
-There is also an optional package which supports Angular Material UI components:
-
-```bash
+# Optional Material UI bindings:
 npm install @ng-modular-forms/material
 ```
 
@@ -29,45 +25,27 @@ export class ExampleComponent extends FormOrchestrator {
     override readonly serializer: FormSerializer,
   ) {
     super(hydrator, serializer);
-
-    const sectionAHandler = inject(SectionAHandler);
-
-    form = new FormGroup({});
-    handlers = [sectionAHandler]
-
-    this.initialize({ form, handlers });
+    this.initialize({
+      form: new FormGroup({}),
+      handlerRegistry: [inject(SectionAHandler)]
+    });
   }
 }
 ```
 
 ### FormHandlerBase
 
-Encapsulates reactive logic.
+Encapsulates reactive logic (e.g., if Field A changes, disable Field B). Keeps UI logic out of the component.
 
 ```ts
-const CONTROL_NAMES = ["fieldA", "dependentField"] as const;
-
-type ControlNames = (typeof CONTROL_NAMES)[number];
-
 @Injectable()
-export class SectionAHandler extends FormHandlerBase<ControlNames> {
+export class SectionAHandler extends FormHandlerBase<'fieldA' | 'fieldB'> {
   override getReactiveLogic(form?: FormGroup): Subscription {
-    this.registerControls(form, [...CONTROL_NAMES]);
-
-    const sub = new Subscription();
-
-    sub.add(this.reactiveMethod());
-
-    return sub;
-  }
+    this.registerControls(form, ["fieldA", "fieldB"]);
 
-  private reactiveMethod() {
-    return this.valueChangesOf("fieldA").subscribe((value) => {
-      if (value) {
-        this.controls.dependentField.enable();
-      } else {
-        this.controls.dependentField.disable();
-      }
+    return this.valueChangesOf("fieldA").subscribe(val => {
+      const fieldB = getControl("fieldB", form);
+      val ? fieldB.enable() : fieldB.disable();
     });
   }
 }
@@ -75,106 +53,43 @@ export class SectionAHandler extends FormHandlerBase<ControlNames> {
 
 ### FormMapperBase
 
-Handles transformations between API and form. Optional: `FormHydrator` and `FormSerializer` will automatically map correlated values.
+Handles transformations between API and form. `FormHydrator` and `FormSerializer` will call these automatically.
 
 ```ts
 export class ExampleMapper extends FormMapperBase<ApiModel, RequestModel, FormModel> {
   toRequest(form: FormGroup): RequestModel {
-    const fieldA = form.value.fieldA ?? null;
-    return {
-      fieldA: fieldA?.replace(/_/g, " "),
-      fieldB: form.value.fieldB,
-    };
+    return { fieldA: form.value.fieldA?.trim() };
   }
 
   fromModel(model: ApiModel): FormModel {
-    return {
-      fieldA: model.fieldA,
-      fieldB: model.fieldB,
-    };
+    return { fieldA: model.fieldA };
   }
 }
 ```
 
 ### FormControlBase
 
-Provides the ControlValueAccessor implementation as well as common component inputs such as label, placeholder, etc.
-
-```ts
-@Component({
-  template: `
-    <input
-      [value]="displayValue()"
-      [disabled]="disabled()"
-      [required]="isRequired()"
-      (blur)="onTouched()"
-      (input)="onInput($event)" />
-  `,
-})
-export class CustomInput extends FormControlBase<string | null> {
-  displayValue = signal<string | null>(null);
-
-  override writeValue(value: number | null): void {
-    super.writeValue(value);
-    this.displayValue.set(value != null ? formatNumber(value) : null);
-  }
-
-  onInput(event: Event) {
-    if (this._disabled()) return;
-
-    const rawValue: string | null = (event.target as HTMLInputElement).value ?? null;
-    const value: number = parseNumber(rawValue);
-
-    this.displayValue.set(value != null ? formatNumber(value) : null);
-
-    this.onChange(value);
-  }
-}
-```
-
-### Reusable Input Behaviors
-
-Behaviors are just plain JavaScript objects:
-
-```ts
-export class CurrencyBehavior {
-  blockNonDigitKey(event: KeyboardEvent) {
-    const input = event.target as HTMLInputElement;
-    const value = input.value;
-
-    if (event.ctrlKey || event.metaKey) {
-      return;
-    }
-
-    // Custom logic...
-
-    event.preventDefault();
-  }
-}
-```
+Provides ControlValueAccessor boilerplate and common UI inputs (labels, hints, error states) for custom components.
 
 ##  Available Input Components
 
-All inputs share a consistent API and can be swapped between native and Material implementations without changing form logic.
+All components share a consistent API and are interchangeable between Native and Material implementations without changing form logic.
 
-| Input Type      | Native Selector                | Material Selector                  | Description                                                                      |
-|-----------------|--------------------------------|------------------------------------|----------------------------------------------------------------------------------|
-| Text / Password | `nmf-text`                     | `nmf-mat-text`                     | Supports multiple input types including password with visibility toggle          |
-| Number          | `nmf-number`                   | `nmf-mat-number`                   | Numeric input with type-safe value handling                                      |
-| Currency        | `nmf-currency`                 | `nmf-mat-currency`                 | Formatted currency input with parsing and display formatting                     |
-| Date            | `nmf-datepicker`               | `nmf-mat-datepicker`               | Date selection with native or Angular Material datepicker UI                     |
-| Time            | `nmf-timepicker`               | `nmf-mat-timepicker`               | Time input with structured formatting                                            |
-| Select          | `nmf-select`                   | `nmf-mat-select`                   | Dropdown/select with support for disabled options                                |
-| Textarea        | `nmf-textarea`                 | `nmf-mat-textarea`                 | Multi-line text input with configurable rows                                     |
+| Input Type      | Native Selector      | Material Selector     |
+|-----------------|----------------------|-----------------------|
+| Text / Password | `nmf-text`           | `nmf-mat-text`        |
+| Number          | `nmf-number`         | `nmf-mat-number`      |
+| Currency        | `nmf-currency`       | `nmf-mat-currency`    |
+| Date            | `nmf-datepicker`     | `nmf-mat-datepicker`  |
+| Time            | `nmf-timepicker`     | `nmf-mat-timepicker`  |
+| Select          | `nmf-select`         | `nmf-mat-select`      |
+| Textarea        | `nmf-textarea`       | `nmf-mat-textarea`    |
 
 ###  Shared Features
 
-- Implements `ControlValueAccessor`
-- Fully compatible with Angular Reactive Forms
-- Consistent API across all inputs
-- Built-in validation state + error messaging
-- Label, required indicator, and loading state support
-- Behavior-driven input handling (formatting, parsing, restrictions)
+- **CVA Compatible:** Works with formControlName.
+- **Behavior-Driven:** Reusable logic for masking, parsing, and restrictions.
+- **Validation:** Integrated error messaging and state handling.
 
 ## License
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-modular-forms/core",
-  "version": "0.7.0",
+  "version": "0.7.2",
   "description": "Core primitives, behaviors, and input components for orchestrating complex Angular reactive forms.",
   "keywords": [
     "angular",
@@ -15,7 +15,7 @@
     "input-components",
     "ng-modular-forms"
   ],
-  "homepage": "https://github.com/ronbodnar/ng-modular-forms",
+  "homepage": "https://ngmf.ronbodnar.com",
   "repository": {
     "type": "git",
     "url": "https://github.com/ronbodnar/ng-modular-forms.git"