@rxdi/forms 0.7.211 → 0.7.213

package/README.md

@@ -233,16 +233,21 @@ You can create your error template as follow:
 ```typescript
 import { html } from '@rxdi/lit-html';
 
-export function InputErrorTemplate(input: HTMLInputElement) {
-  if (input && !input.checkValidity()) {
+export function InputErrorTemplate(input: HTMLInputElement | AbstractInput) {
+  // Check 'touched' to show errors only after interaction
+  // Check 'validity.valid' silently to avoid side effects
+  if (input && input.touched && !input.validity.valid) {
     return html`
-      <div>${input.validationMessage}</div>
+      <div style="color:red; font-size: 13px;">${input.validationMessage}</div>
     `;
   }
   return '';
 }
 ```
 
+> **Note:** Using `!input.validity.valid` is preferred over `!input.checkValidity()` inside templates because `checkValidity()` fires an `invalid` event which can cause recursive validation loops.
+```
+
 
 Usage
 
@@ -312,4 +317,279 @@ form
   />
 </form>
 <script src="./main.ts"></script>
+```
+
+#### Nested Forms (FormArray)
+
+You can create nested forms using `FormArray` and `FormGroup`.
+
+```typescript
+import { FormArray, FormGroup } from '@rxdi/forms';
+
+const form = new FormGroup({
+  users: new FormArray([
+    new FormGroup({
+      name: 'User 1',
+      email: 'user1@gmail.com'
+    })
+  ])
+});
+```
+
+Template usage:
+
+```html
+${this.form.get('users').controls.map((group, index) => html`
+  <div>
+    <input
+      name="users[${index}].name"
+      .value=${group.value.name}
+    />
+    <input
+      name="users[${index}].email"
+      .value=${group.value.email}
+    />
+    <button @click=${() => this.removeUser(index)}>Remove</button>
+  </div>
+`)}
+<button @click=${() => this.addUser()}>Add User</button>
+```
+
+Adding items dynamically:
+
+```typescript
+addUser() {
+  (this.form.get('users') as FormArray).push(
+    new FormGroup({ name: '', email: '' })
+  );
+}
+
+removeUser(index: number) {
+  (this.form.get('users') as FormArray).removeAt(index);
+}
+```
+
+#### Type Safety & Decorator Checking
+
+The `@Form` decorator now proactively checks that the decorated property is strongly typed as `FormGroup`.
+
+```typescript
+export class MyComponent {
+  @Form({ name: 'my-form' })
+  form: FormGroup; // Must be typed as FormGroup!
+}
+```
+
+If you incorrectly type it (e.g., `form: string`), the library will throw a helpful error at runtime (requires `emitDecoratorMetadata: true` in `tsconfig`).
+
+Validators are also type-safe using the `ValidatorFn` type:
+
+```typescript
+import { ValidatorFn, AbstractInput, InputErrorMessage } from '@rxdi/forms';
+
+const myValidator: ValidatorFn = async (element: AbstractInput) => {
+  // ... validation logic
+};
+```
+
+#### Complete Component Example
+
+Here is a complete, copy-pasteable example of a component using `@rxdi/forms` with best practices for validation and type safety.
+
+```typescript
+import { Component, html, LitElement } from '@rxdi/lit-html';
+import { Form, FormGroup, AbstractInput } from '@rxdi/forms';
+
+/**
+ * Helper to display errors safely.
+ * Checks 'touched' (user interacted) and 'validity.valid' (silent check).
+ */
+function ErrorTemplate(input: AbstractInput) {
+  if (input && input.touched && !input.validity.valid) {
+    return html`<div class="error">${input.validationMessage}</div>`;
+  }
+  return html``;
+}
+
+@Component({
+  selector: 'user-profile-form',
+  template(this: UserProfileForm) {
+    return html`
+      <form
+        name="user-form"
+        @submit=${(e: Event) => {
+          e.preventDefault();
+          console.log('Form Value:', this.form.value);
+        }}
+      >
+        <!-- Email Field -->
+        <div>
+          <label>Email</label>
+          <input
+            type="email"
+            name="email"
+            required
+            .value=${this.form.value.email}
+            @blur=${() => this.requestUpdate()} 
+          />
+          <!-- 
+            @blur triggers a re-render so 'touched' state is reflected.
+            The library handles 'touched' internally on blur, but we need 
+            to request an update to show the error message immediately.
+          -->
+          ${ErrorTemplate(this.form.get('email'))}
+        </div>
+
+        <!-- Password Field -->
+        <div>
+          <label>Password</label>
+          <input
+            type="password"
+            name="password"
+            required
+            minlength="6"
+            .value=${this.form.value.password}
+            @blur=${() => this.requestUpdate()}
+          />
+          ${ErrorTemplate(this.form.get('password'))}
+        </div>
+
+        <button type="submit" ?disabled=${this.form.invalid}>
+          Save Profile
+        </button>
+      </form>
+    `;
+  },
+})
+export class UserProfileForm extends LitElement {
+  @Form({
+    name: 'user-form', // Must match <form name="...">
+    strategy: 'change', // Validate on change/blur
+  })
+  form = new FormGroup({
+    email: '',
+    password: '',
+  });
+}
+```
+
+### Key Takeaways for Templates
+
+1.  **Name Matching**: The `<form name="X">` attribute must match the `@Form({ name: 'X' })` name.
+2.  **Input Binding**: Use `.value=${this.form.value.fieldName}` to bind data. The library updates the model on user input automatically.
+3.  **Error Display**: Use a helper like `ErrorTemplate` that checks `.touched` and `.validity.valid`.
+    *   **Wait until touched**: `if (input.touched)` prevents errors from showing on load.
+    *   **Silent Check**: `!input.validity.valid` prevents side effects (looping).
+4.  **Re-rendering**: Since validation often updates on `blur`, ensure your component re-renders to show the error state (e.g., via `@blur=${() => this.requestUpdate()}` or generic event handlers).
+
+#### Complete Nested Form Example (FormArray)
+
+This example demonstrates managing a dynamic list of items (e.g., Team Members) using `FormArray`.
+
+```typescript
+import { Component, html, LitElement } from '@rxdi/lit-html';
+import { Form, FormGroup, FormArray, AbstractInput } from '@rxdi/forms';
+
+function ErrorTemplate(input: AbstractInput) {
+  if (input && input.touched && !input.validity.valid) {
+    return html`<div class="error">${input.validationMessage}</div>`;
+  }
+  return html``;
+}
+
+@Component({
+  selector: 'team-form',
+  template(this: TeamForm) {
+    return html`
+      <form @submit=${(e) => e.preventDefault()}>
+        
+        <!-- Main Form Field -->
+        <div>
+          <label>Team Name</label>
+          <input
+            name="teamName"
+            required
+            .value=${this.form.value.teamName}
+            @blur=${() => this.requestUpdate()}
+          />
+          ${ErrorTemplate(this.form.get('teamName'))}
+        </div>
+
+        <h3>Members</h3>
+        
+        <!-- FormArray Iteration -->
+        ${this.members.controls.map((control, index) => html`
+          <div class="member-row">
+            
+            <!-- Nested Field: Name -->
+            <!-- Notice the name syntax: arrayName[index].fieldName -->
+            <div class="field">
+              <input
+                placeholder="Member Name"
+                name="members[${index}].name" 
+                required
+                .value=${control.value.name}
+                @blur=${() => this.requestUpdate()}
+              />
+              <!-- Access nested control using .get() on the group -->
+              ${ErrorTemplate(control.get('name'))}
+            </div>
+
+            <!-- Nested Field: Role -->
+            <div class="field">
+              <input
+                placeholder="Role"
+                name="members[${index}].role"
+                required
+                .value=${control.value.role}
+                @blur=${() => this.requestUpdate()}
+              />
+              ${ErrorTemplate(control.get('role'))}
+            </div>
+
+            <button type="button" @click=${() => this.removeMember(index)}>
+              Remove
+            </button>
+          </div>
+        `)}
+
+        <button type="button" @click=${() => this.addMember()}>
+          Add Member
+        </button>
+
+        <button type="submit" ?disabled=${this.form.invalid}>
+          Submit Team
+        </button>
+      </form>
+    `;
+  },
+})
+export class TeamForm extends LitElement {
+  @Form({
+    name: 'team-form',
+    strategy: 'change',
+  })
+  form = new FormGroup({
+    teamName: '',
+    members: new FormArray<{ name: string; role: string }>([]),
+  });
+
+  // Helper to cast the control to FormArray for better typing
+  get members() {
+    return this.form.get('members') as FormArray;
+  }
+
+  addMember() {
+    this.members.push(
+      new FormGroup({
+        name: '',
+        role: '',
+      })
+    );
+  }
+
+  removeMember(index: number) {
+    this.members.removeAt(index);
+  }
+}
 ```

package/dist/form.array.d.ts

@@ -0,0 +1,31 @@
+import { LitElement } from '@rxdi/lit-html';
+import { BehaviorSubject } from 'rxjs';
+import { AbstractControl, FormOptions } from './form.tokens';
+export declare class FormArray<T = any> implements AbstractControl<T[]> {
+    controls: AbstractControl<T>[];
+    readonly valueChanges: BehaviorSubject<T[]>;
+    private readonly _valueChanges;
+    parentElement: LitElement;
+    name: string;
+    valid: boolean;
+    invalid: boolean;
+    errors: {};
+    private form;
+    private options;
+    private subscriptions;
+    constructor(controls?: AbstractControl<T>[], name?: string);
+    get value(): T[];
+    getOptions(): FormOptions;
+    setOptions(options: FormOptions): void;
+    push(control: AbstractControl<T>): Promise<void>;
+    removeAt(index: number): void;
+    private subscribeToControl;
+    unsubscribe(): void;
+    updateValue(): void;
+    requestUpdate(): void;
+    setParentElement(parent: LitElement): void;
+    setFormElement(form: HTMLFormElement): void;
+    init(): void;
+    getParentElement(): LitElement;
+    set value(values: T[]);
+}

package/dist/form.array.js

@@ -0,0 +1,121 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormArray = void 0;
+const rxjs_1 = require("rxjs");
+class FormArray {
+    constructor(controls = [], name = '') {
+        this.controls = [];
+        this.valid = true;
+        this.invalid = false;
+        this.errors = {};
+        this.options = {};
+        this.subscriptions = new Map();
+        this.controls = controls;
+        this.name = name;
+        this._valueChanges = new rxjs_1.BehaviorSubject(this.value);
+        this.valueChanges = this._valueChanges;
+        this.controls.forEach((c) => this.subscribeToControl(c));
+    }
+    get value() {
+        return this.controls.map((c) => c.value);
+    }
+    getOptions() {
+        return this.options;
+    }
+    setOptions(options) {
+        this.options = options;
+        this.controls.forEach((c, index) => {
+            c.setOptions(Object.assign(Object.assign({}, options), { namespace: `${this.name}[${index}]` }));
+        });
+    }
+    push(control) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.controls.push(control);
+            this.subscribeToControl(control);
+            const index = this.controls.length - 1;
+            control.setOptions(Object.assign(Object.assign(Object.assign({}, this.options), control.getOptions()), { namespace: `${this.name}[${index}]` }));
+            this.updateValue();
+            this.requestUpdate();
+            if (this.parentElement) {
+                yield this.parentElement.updateComplete;
+                control.setParentElement(this.parentElement);
+                if (this.form) {
+                    control.setFormElement(this.form);
+                    control.init();
+                }
+                else if (control.getFormElement()) {
+                    control.init();
+                }
+                else if (this.controls[0] && this.controls[0].getFormElement()) {
+                    control.setFormElement(this.controls[0].getFormElement());
+                    control.init();
+                }
+            }
+        });
+    }
+    removeAt(index) {
+        const control = this.controls[index];
+        if (this.subscriptions.has(control)) {
+            this.subscriptions.get(control).unsubscribe();
+            this.subscriptions.delete(control);
+        }
+        this.controls.splice(index, 1);
+        this.updateValue();
+        this.requestUpdate();
+    }
+    subscribeToControl(control) {
+        if (control.valueChanges) {
+            this.subscriptions.set(control, control.valueChanges.subscribe(() => {
+                this.updateValue();
+            }));
+        }
+    }
+    unsubscribe() {
+        this.subscriptions.forEach((sub) => sub.unsubscribe());
+        this.subscriptions.clear();
+        this.controls.forEach((c) => c.unsubscribe && c.unsubscribe());
+    }
+    updateValue() {
+        this._valueChanges.next(this.value);
+    }
+    requestUpdate() {
+        if (this.parentElement) {
+            this.parentElement.requestUpdate();
+        }
+    }
+    setParentElement(parent) {
+        this.parentElement = parent;
+        this.controls.forEach((c) => c.setParentElement(parent));
+    }
+    setFormElement(form) {
+        this.form = form;
+        this.controls.forEach((c) => c.setFormElement(form));
+    }
+    init() {
+        this.controls.forEach((c) => c.init());
+    }
+    getParentElement() {
+        return this.parentElement;
+    }
+    set value(values) {
+        if (!Array.isArray(values)) {
+            return;
+        }
+        values.forEach((v, i) => {
+            if (this.controls[i]) {
+                this.controls[i].value = v;
+            }
+        });
+        this.updateValue();
+    }
+}
+exports.FormArray = FormArray;

package/dist/form.decorator.d.ts

@@ -1,2 +1,2 @@
 import { FormOptions } from './form.tokens';
-export declare function Form(options?: FormOptions): (clazz: Object, name: string | number | symbol) => void;
+export declare function Form(options?: FormOptions): (clazz: any, name: string | number | symbol) => void;

package/dist/form.decorator.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Form = Form;
 const form_group_1 = require("./form.group");
-const rx_fake_1 = require("./rx-fake");
+const rxjs_1 = require("rxjs");
 function Form(options = {
     strategy: 'none',
 }) {
@@ -10,9 +10,9 @@ function Form(options = {
         if (!options.name) {
             throw new Error('Missing form name');
         }
-        const Destroy = clazz.constructor.prototype.disconnectedCallback || rx_fake_1.noop;
-        const UpdateFirst = clazz.constructor.prototype.firstUpdated || rx_fake_1.noop;
-        const Connect = clazz.constructor.prototype.connectedCallback || rx_fake_1.noop;
+        const Destroy = clazz.constructor.prototype.disconnectedCallback || rxjs_1.noop;
+        const UpdateFirst = clazz.constructor.prototype.firstUpdated || rxjs_1.noop;
+        const Connect = clazz.constructor.prototype.connectedCallback || rxjs_1.noop;
         clazz.constructor.prototype.connectedCallback = function () {
             if (!(this[name] instanceof form_group_1.FormGroup)) {
                 throw new Error('Value provided is not an instance of FormGroup!');

package/dist/form.group.d.ts

@@ -1,18 +1,20 @@
-import { FormInputOptions, FormOptions, ErrorObject, AbstractInput } from './form.tokens';
 import { LitElement } from '@rxdi/lit-html';
+import { AbstractControl, AbstractInput, ErrorObject, FormInputOptions, FormOptions, ValidatorFn } from './form.tokens';
 export declare class FormGroup<T = FormInputOptions, E = {
     [key: string]: never;
-}> {
-    validators: Map<string, Function[]>;
+}> implements AbstractControl<T> {
+    validators: Map<string, ValidatorFn[]>;
     valid: boolean;
     invalid: boolean;
     errors: T;
+    private controls;
     private readonly _valueChanges;
     private form;
     private errorMap;
     private inputs;
     private options;
     private parentElement;
+    private subscriptions;
     constructor(value?: T, errors?: E);
     init(): void;
     prepareValues(): this;
@@ -21,7 +23,9 @@ export declare class FormGroup<T = FormInputOptions, E = {
     setOptions(options: FormOptions): this;
     getOptions(): FormOptions;
     get valueChanges(): import("rxjs").Observable<T>;
-    updateValueAndValidity(): Promise<ErrorObject[]>;
+    updateValueAndValidity(): Promise<(ErrorObject | {
+        message: string;
+    })[]>;
     private updateValueAndValidityOnEvent;
     applyValidationContext({ errors, element }: ErrorObject): boolean;
     querySelectForm(shadowRoot: HTMLElement | ShadowRoot): HTMLFormElement;
@@ -31,11 +35,12 @@ export declare class FormGroup<T = FormInputOptions, E = {
     setElementValidity(el: AbstractInput, validity?: boolean): Promise<void>;
     setElementDirty(input: AbstractInput): void;
     isInputPresentOnStage(input: AbstractInput): number;
+    private getModelKeyName;
     validate(element: AbstractInput): Promise<ErrorObject>;
     private mapInputErrors;
-    get(name: keyof T): AbstractInput;
-    getError(inputName: keyof T, errorKey: keyof E): never;
-    hasError(inputName: keyof T, errorKey: keyof E): boolean;
+    get(name: keyof T): AbstractControl<any> | AbstractInput;
+    getError(inputName: keyof T, errorKey: string): never;
+    hasError(inputName: keyof T, errorKey: string): boolean;
     reset(): void;
     setFormValidity(validity?: boolean): void;
     resetErrors(): void;
@@ -43,7 +48,7 @@ export declare class FormGroup<T = FormInputOptions, E = {
     set value(value: T);
     unsubscribe(): void;
     getValue(name: keyof T): T[keyof T];
-    setValue(name: keyof T, value: any): void;
+    setValue(name: keyof T, value: unknown): void;
     setFormValue(value: T): void;
     setFormElement(form: HTMLFormElement): this;
     setInputs(inputs: AbstractInput[]): void;

package/dist/form.group.js

@@ -10,36 +10,60 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormGroup = void 0;
+const rxjs_1 = require("rxjs");
 const form_tokens_1 = require("./form.tokens");
-const rx_fake_1 = require("./rx-fake");
 class FormGroup {
     constructor(value, errors) {
         this.validators = new Map();
         this.valid = true;
         this.invalid = false;
         this.errors = {};
+        this.controls = new Map();
         this.errorMap = new Map();
         this.inputs = new Map();
         this.options = {};
-        this._valueChanges = new rx_fake_1.BehaviorSubject(value);
+        this.subscriptions = new Map();
+        this._valueChanges = new rxjs_1.BehaviorSubject(value);
+        if (value) {
+            Object.keys(value).forEach((key) => {
+                if (typeof value[key] === 'object' && value[key] !== null && (value[key]['controls'] || value[key]['push'])) {
+                    // It's likely a FormGroup or FormArray
+                    const control = value[key];
+                    if (control.name === '' || control.name === undefined) {
+                        control.name = key;
+                    }
+                    this.controls.set(key, control);
+                    if (control.valueChanges) {
+                        this.subscriptions.set(key, control.valueChanges.subscribe(() => {
+                            this._valueChanges.next(this.value);
+                        }));
+                    }
+                }
+            });
+        }
     }
     init() {
         this.setFormElement(this.querySelectForm(this.parentElement.shadowRoot || this.parentElement)).setInputs(this.mapEventToInputs(this.querySelectorAllInputs()));
+        this.controls.forEach((c) => {
+            if (c.init)
+                c.init();
+        });
     }
     prepareValues() {
         Object.keys(this.value).forEach((v) => {
+            // Skip nested controls
+            if (this.controls.has(v))
+                return;
             const value = this.value[v];
             this.errors[v] = this.errors[v] || {};
-            if (value.constructor === Array) {
+            if (value && value.constructor === Array) {
                 if (value[1] && value[1].constructor === Array) {
                     value[1].forEach((val) => {
                         const oldValidators = this.validators.get(v) || [];
                         this.validators.set(v, [...oldValidators, val]);
                     });
                 }
-                if (value[0].constructor === String ||
-                    value[0].constructor === Number ||
-                    value[0].constructor === Boolean) {
+                if (value[0].constructor === String || value[0].constructor === Number || value[0].constructor === Boolean) {
                     this.value[v] = value[0];
                 }
                 else {
@@ -51,6 +75,11 @@ class FormGroup {
     }
     setParentElement(parent) {
         this.parentElement = parent;
+        this.controls.forEach((c) => {
+            if (c.setParentElement) {
+                c.setParentElement(parent);
+            }
+        });
         return this;
     }
     getParentElement() {
@@ -58,6 +87,10 @@ class FormGroup {
     }
     setOptions(options) {
         this.options = options;
+        this.controls.forEach((c) => {
+            if (c.setOptions)
+                c.setOptions(options);
+        });
         return this;
     }
     getOptions() {
@@ -66,6 +99,7 @@ class FormGroup {
     get valueChanges() {
         return this._valueChanges.asObservable();
     }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     updateValueAndValidity() {
         return __awaiter(this, void 0, void 0, function* () {
             this.resetErrors();
@@ -75,11 +109,21 @@ class FormGroup {
                 this.setElementDirty(i);
                 return yield this.validate(i);
             })));
+            for (const [key, control] of this.controls.entries()) {
+                if (control.updateValueAndValidity) {
+                    yield control.updateValueAndValidity();
+                    if (control.invalid) {
+                        this.invalid = true;
+                        this.valid = false;
+                    }
+                }
+            }
             this.getParentElement().requestUpdate();
-            return inputs.filter((e) => e.errors.length);
+            return inputs.filter((e) => e.errors.length) || (this.invalid ? [{ message: 'Invalid Form' }] : []);
         });
     }
     updateValueAndValidityOnEvent(method) {
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
         const self = this;
         return function (event) {
             return __awaiter(this, void 0, void 0, function* () {
@@ -101,7 +145,7 @@ class FormGroup {
                     value = Number(value);
                 }
                 const inputsWithBindings = [
-                    ...(self.getFormElement().querySelectorAll(`input[name="${this.name}"]:checked`)).values(),
+                    ...self.getFormElement().querySelectorAll(`input[name="${this.name}"]:checked`).values(),
                 ];
                 if (hasMultipleBindings > 1) {
                     if (!self.options.multi && this.type === 'checkbox') {
@@ -117,13 +161,13 @@ class FormGroup {
                 if (self.options.strict) {
                     if (isValid) {
                         yield self.setElementValidity(this, isValid);
-                        self.setValue(this.name, value);
+                        self.setValue(self.getModelKeyName(this.name), value);
                     }
                     self.parentElement.requestUpdate();
                     return method.call(self.parentElement, event);
                 }
                 yield self.setElementValidity(this, isValid);
-                self.setValue(this.name, value);
+                self.setValue(self.getModelKeyName(this.name), value);
                 self.parentElement.requestUpdate();
                 return method.call(self.parentElement, event);
             });
@@ -132,18 +176,21 @@ class FormGroup {
     applyValidationContext({ errors, element }) {
         const form = this.getFormElement();
         if (errors.length) {
-            this.invalid = form.invalid = true;
-            this.valid = form.valid = false;
+            this.invalid = form['invalid'] = true;
+            this.valid = form['valid'] = false;
             return false;
         }
         else {
-            this.errors[element.name] = {};
-            this.invalid = form.invalid = false;
-            this.valid = form.valid = true;
+            this.errors[this.getModelKeyName(element.name)] = {};
+            this.invalid = form['invalid'] = !form.checkValidity();
+            this.valid = form['valid'] = form.checkValidity();
             return true;
         }
     }
     querySelectForm(shadowRoot) {
+        if (this.options['form']) {
+            return this.options['form'];
+        }
         const form = shadowRoot.querySelector(`form[name="${this.options.name}"]`);
         if (!form) {
             throw new Error(`Form element with name "${this.options.name}" not present inside ${this.getParentElement().outerHTML} component`);
@@ -155,10 +202,9 @@ class FormGroup {
         return form;
     }
     querySelectAll(name) {
-        return [
-            ...this.form.querySelectorAll(name).values(),
-        ];
+        return [...this.form.querySelectorAll(name).values()];
     }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     querySelectorAllInputs() {
         var _a;
         return [...((_a = this.options.customElements) !== null && _a !== void 0 ? _a : []), 'input', 'select', 'textarea']
@@ -167,11 +213,14 @@ class FormGroup {
             .filter((el) => this.isInputPresentOnStage(el))
             .filter((el) => !!el.name);
     }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     mapEventToInputs(inputs = []) {
         return inputs.map((el) => {
             const strategy = `on${this.options.strategy}`;
             if (!el[strategy]) {
-                el[strategy] = function () { };
+                el[strategy] = function () {
+                    //
+                };
             }
             const customAttributes = Object.keys(el.attributes)
                 .map((k) => (el.attributes[k].name.startsWith('#') ? el.attributes[k] : null))
@@ -202,20 +251,39 @@ class FormGroup {
     }
     isInputPresentOnStage(input) {
         if (input.outerHTML === '<input type="submit" style="display: none;">') {
-            return;
+            return 0;
         }
-        const isInputPresent = Object.keys(this.value).filter((v) => v === input.name);
+        const keyIndex = this.getModelKeyName(input.name);
+        const isInputPresent = Object.keys(this.value).filter((v) => v === keyIndex);
         return isInputPresent.length;
     }
+    getModelKeyName(domName) {
+        if (this.options['namespace']) {
+            // pattern: namespace[key] or namespace.key
+            // Example: allowedIps[0].ip -> namespace=allowedIps[0] -> key=ip
+            if (domName.startsWith(this.options['namespace'])) {
+                const suffix = domName.replace(this.options['namespace'], '');
+                // Handle .key or [key]
+                if (suffix.startsWith('.')) {
+                    return suffix.substring(1);
+                }
+                if (suffix.startsWith('[')) {
+                    return suffix.substring(1, suffix.length - 1); // Not dealing with that yet
+                }
+            }
+            return domName;
+        }
+        return domName;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     validate(element) {
         return __awaiter(this, void 0, void 0, function* () {
             let errors = [];
             element.setCustomValidity('');
-            this.setFormValidity(true);
             if (!element.checkValidity()) {
                 return {
                     errors: errors.concat(Object.keys(form_tokens_1.InputValidityState)
-                        .map((key) => element.validity[key] ? { key, message: element.validationMessage } : null)
+                        .map((key) => (element.validity[key] ? { key, message: element.validationMessage } : null))
                         .filter((i) => !!i)),
                     element,
                 };
@@ -224,32 +292,36 @@ class FormGroup {
             if (!errors.length) {
                 return { errors: [], element };
             }
-            this.setFormValidity(false);
             element.setCustomValidity(errors[0].message);
             return { element, errors };
         });
     }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     mapInputErrors(element) {
         return __awaiter(this, void 0, void 0, function* () {
-            const res = yield Promise.all((this.validators.get(element.name) || []).map((v) => __awaiter(this, void 0, void 0, function* () {
-                this.errors[element.name] = this.errors[element.name] || {};
+            const modelKey = this.getModelKeyName(element.name);
+            const res = yield Promise.all((this.validators.get(modelKey) || []).map((v) => __awaiter(this, void 0, void 0, function* () {
+                this.errors[modelKey] = this.errors[modelKey] || {};
                 const error = yield v.bind(this.getParentElement())(element);
                 // if (error) {
                 //   element.focus();
                 // }
                 if (error && error.key) {
-                    this.errors[element.name][error.key] = error.message;
+                    this.errors[modelKey][error.key] = error.message;
                     this.errorMap.set(v, error.key);
                     return { key: error.key, message: error.message };
                 }
                 else if (this.errorMap.has(v)) {
-                    delete this.errors[element.name][this.errorMap.get(v)];
+                    delete this.errors[modelKey][this.errorMap.get(v)];
                 }
             })));
             return res.filter((i) => !!i);
         });
     }
     get(name) {
+        if (this.controls.has(name)) {
+            return this.controls.get(name);
+        }
         return this.inputs.get(name);
     }
     getError(inputName, errorKey) {
@@ -277,7 +349,11 @@ class FormGroup {
         this.errorMap.clear();
     }
     get value() {
-        return this._valueChanges.getValue();
+        const values = this._valueChanges.getValue();
+        this.controls.forEach((control, key) => {
+            values[key] = control.value;
+        });
+        return values;
     }
     set value(value) {
         this._valueChanges.next(value);
@@ -285,6 +361,9 @@ class FormGroup {
     unsubscribe() {
         this.reset();
         this._valueChanges.unsubscribe();
+        this.subscriptions.forEach((s) => s.unsubscribe());
+        this.subscriptions.clear();
+        this.controls.forEach((c) => { var _a; return (_a = c.unsubscribe) === null || _a === void 0 ? void 0 : _a.call(c); });
     }
     getValue(name) {
         return this.value[name];
@@ -292,9 +371,12 @@ class FormGroup {
     setValue(name, value) {
         const input = this.get(name);
         if (!input) {
-            return;
+            // If no input, maybe just set the value in model?
+            // User code had return; but we might want to update model even if no input?
+            //  return;
         }
-        input.value = value;
+        if (input && input.value !== undefined)
+            input.value = value;
         const values = this.value;
         values[name] = value;
         this.value = values;
@@ -304,12 +386,17 @@ class FormGroup {
     }
     setFormElement(form) {
         this.form = form;
+        this.controls.forEach((c) => {
+            if (c.setFormElement)
+                c.setFormElement(form);
+        });
         return this;
     }
     setInputs(inputs) {
         this.inputs = new Map(inputs.map((e) => {
-            e.value = this.getValue(e.name);
-            return [e.name, e];
+            const key = this.getModelKeyName(e.name);
+            e.value = this.getValue(key);
+            return [key, e];
         }));
     }
     getFormElement() {

package/dist/form.tokens.d.ts

@@ -1,3 +1,5 @@
+import { LitElement } from '@rxdi/lit-html';
+import { Observable } from 'rxjs';
 export type FormStrategies = keyof WindowEventMap;
 export interface FormOptions {
     /** Name of the form element */
@@ -14,9 +16,30 @@ export interface FormOptions {
      * Example can be found here https://gist.github.com/Stradivario/57acf0fa19900867a7f55b0f01251d6e
      * */
     customElements?: string[];
+    /**
+     * Internal property for handling nested forms.
+     */
+    namespace?: string;
+}
+export interface AbstractControl<T = any> {
+    setOptions(options: FormOptions): this | void;
+    getOptions(): FormOptions;
+    init(): void;
+    setParentElement(parent: LitElement): this | void;
+    setFormElement(form: HTMLFormElement): this | void;
+    unsubscribe(): void;
+    valueChanges: Observable<T>;
+    value: T;
+    valid: boolean;
+    invalid: boolean;
+    updateValueAndValidity?(): Promise<any>;
+    name?: string;
+    push?(control: AbstractControl): void;
+    getFormElement?(): HTMLFormElement;
 }
+export type ValidatorFn = (element: AbstractInput | HTMLInputElement) => Promise<InputErrorMessage | void> | InputErrorMessage | void;
 export interface FormInputOptions {
-    [key: string]: [string, Function[]];
+    [key: string]: [string | number | boolean | Date, ValidatorFn[]];
 }
 export interface InputErrorMessage<T = any> {
     key: T;

package/dist/form.tokens.js

@@ -18,5 +18,5 @@ exports.InputValidityState = strEnum([
     'tooShort',
     'typeMismatch',
     'valid',
-    'valueMissing'
+    'valueMissing',
 ]);

package/dist/index.d.ts

@@ -1,3 +1,4 @@
 export * from './form.decorator';
 export * from './form.group';
 export * from './form.tokens';
+export * from './form.array';

package/dist/index.js

@@ -17,3 +17,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./form.decorator"), exports);
 __exportStar(require("./form.group"), exports);
 __exportStar(require("./form.tokens"), exports);
+__exportStar(require("./form.array"), exports);

package/package.json

@@ -1,23 +1,27 @@
 {
-  "name": "@rxdi/forms",
-  "version": "0.7.211",
-  "main": "./dist/index.js",
-  "author": "Kristiyan Tachev",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/rxdi/forms"
-  },
-  "scripts": {
-    "build": "tsc"
-  },
-  "devDependencies": {
-    "@rxdi/lit-html": "^0.7.210",
-    "@types/node": "^25.0.3",
-    "rxjs": "^7.8.2",
-    "typescript": "^5.9.3"
-  },
-  "types": "./dist/index.d.ts",
-  "module": "./dist/index.js",
-  "typings": "./dist/index.d.ts"
+ "name": "@rxdi/forms",
+ "version": "0.7.213",
+ "main": "./dist/index.js",
+ "author": "Kristiyan Tachev",
+ "license": "MIT",
+ "repository": {
+  "type": "git",
+  "url": "https://github.com/rxdi/forms"
+ },
+ "scripts": {
+  "build": "tsc"
+ },
+ "devDependencies": {
+  "@rxdi/lit-html": "^0.7.212",
+  "@types/node": "^25.0.3",
+  "rxjs": "^7.8.2",
+  "typescript": "^5.9.3"
+ },
+ "peerDependencies": {
+  "rxjs": "^7.8.2",
+  "@rxdi/lit-html": "*"
+ },
+ "types": "./dist/index.d.ts",
+ "module": "./dist/index.js",
+ "typings": "./dist/index.d.ts"
 }

package/dist/rx-fake.d.ts

@@ -1,34 +0,0 @@
-import { BehaviorSubject as BS, Observable as O, Subscription as S } from 'rxjs';
-type OBS<T> = (o: $Observable<T>) => void | Function;
-type FN<T> = (a: T) => void;
-export declare class $Subscription<T> {
-    o: Map<Function, FN<T>>;
-    unsubscribe(): void;
-}
-export declare class $Observable<T> extends $Subscription<T> {
-    fn: OBS<T>;
-    init: boolean;
-    constructor(fn?: OBS<T>);
-    subscribe(c: FN<T>): $Subscription<T>;
-    complete(): void;
-    next(s: T): void;
-}
-export declare class $BehaviorSubject<T> extends $Observable<T> {
-    v: T;
-    constructor(v: T);
-    private setValue;
-    next(s: T): void;
-    getValue(): T;
-    asObservable(): this;
-}
-export declare function noop(): void;
-export declare function BehaviorSubject<T>(init: T): void;
-export declare function Observable<T>(fn?: OBS<T>): void;
-export declare function Subscription<T>(): void;
-export interface BehaviorSubject<T> extends BS<T> {
-}
-export interface Observable<T> extends O<T> {
-}
-export interface Subscription extends S {
-}
-export {};

package/dist/rx-fake.js

@@ -1,99 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.$BehaviorSubject = exports.$Observable = exports.$Subscription = void 0;
-exports.noop = noop;
-exports.BehaviorSubject = BehaviorSubject;
-exports.Observable = Observable;
-exports.Subscription = Subscription;
-class $Subscription {
-    constructor() {
-        this.o = new Map();
-    }
-    unsubscribe() {
-        [...this.o.values()].forEach(v => this.o.delete(v));
-    }
-}
-exports.$Subscription = $Subscription;
-class $Observable extends $Subscription {
-    constructor(fn) {
-        super();
-        this.init = true;
-        this.fn = fn;
-    }
-    subscribe(c) {
-        this.o.set(c, c);
-        if (typeof this.fn === 'function' && this.init) {
-            this.fn(this);
-            this.init = false;
-        }
-        return {
-            unsubscribe: () => {
-                this.o.delete(c);
-            }
-        };
-    }
-    complete() {
-        this.unsubscribe();
-    }
-    next(s) {
-        [...this.o.values()].forEach(f => f(s));
-    }
-}
-exports.$Observable = $Observable;
-class $BehaviorSubject extends $Observable {
-    constructor(v) {
-        if (typeof v === 'function') {
-            super(v);
-        }
-        super(null);
-        this.setValue(v);
-    }
-    setValue(v) {
-        this.v = v;
-    }
-    next(s) {
-        this.setValue(s);
-        super.next(s);
-    }
-    getValue() {
-        return this.v;
-    }
-    asObservable() {
-        return this;
-    }
-}
-exports.$BehaviorSubject = $BehaviorSubject;
-function behaviorOrFake() {
-    try {
-        return require('rxjs').BehaviorSubject;
-    }
-    catch (e) { }
-    return $BehaviorSubject;
-}
-function observableOrFake() {
-    try {
-        return require('rxjs').Observable;
-    }
-    catch (e) { }
-    return $Observable;
-}
-function subscriptionOrFake() {
-    try {
-        return require('rxjs').Subscription;
-    }
-    catch (e) { }
-    return $Subscription;
-}
-function noop() { }
-function BehaviorSubject(init) {
-    const b = behaviorOrFake();
-    return new b(init);
-}
-function Observable(fn) {
-    const o = observableOrFake();
-    return new o(fn);
-}
-function Subscription() {
-    const s = subscriptionOrFake();
-    return new s();
-}