@rxdi/forms 0.7.214 → 0.7.216

package/README.md

@@ -29,7 +29,7 @@ interface UserParams {
   address: {
     city: string;
     street: string;
-  }
+  };
 }
 
 @Component({
@@ -37,14 +37,13 @@ interface UserParams {
   template(this: UserProfile) {
     return html`
       <form name="user-form" @submit=${this.onSubmit}>
-        
         <!-- Deep Binding with Dot Notation -->
         <input
           name="firstName"
           .value=${this.form.value.firstName}
           @blur=${() => this.requestUpdate()}
         />
-        
+
         <!-- Nested Group Binding -->
         <input
           name="address.city"
@@ -55,33 +54,32 @@ interface UserParams {
         <button type="submit">Save</button>
       </form>
     `;
-  }
+  },
 })
 export class UserProfile extends LitElement {
-  
   // Model to bind
   @property({ type: Object })
   user: UserParams = {
     firstName: 'John',
-    address: { city: 'New York', street: '5th Ave' }
+    address: { city: 'New York', street: '5th Ave' },
   };
 
   @Form({
     name: 'user-form',
     strategy: 'change',
-    model: 'user' // Automatic Model Binding!
+    model: 'user', // Automatic Model Binding!
   })
   form = new FormGroup({
     firstName: '',
     address: new FormGroup({
       city: '',
-      street: ''
-    })
+      street: '',
+    }),
   });
 
   onSubmit(e: Event) {
     e.preventDefault();
-    console.log(this.form.value); 
+    console.log(this.form.value);
     // Output: { firstName: 'John', address: { city: 'New York', street: '5th Ave' } }
   }
 }
@@ -90,6 +88,7 @@ export class UserProfile extends LitElement {
 ## New Features
 
 ### Automatic Model Binding
+
 Use the `model` property in the `@Form` decorator to automatically populate the form from a component property.
 
 ```typescript
@@ -99,9 +98,11 @@ Use the `model` property in the `@Form` decorator to automatically populate the
 })
 form = new FormGroup({ ... });
 ```
+
 The library reads `this.myData` during initialization and calls `form.patchValue(this.myData)`.
 
 ### Nested FormGroups & FormArray
+
 You can nest `FormGroup`s arbitrarily deep.
 
 ```typescript
@@ -110,25 +111,28 @@ form = new FormGroup({
     id: 1,
     flags: new FormGroup({
       isActive: true,
-      isAdmin: false
-    })
+      isAdmin: false,
+    }),
   }),
-  tags: new FormArray([
-    new FormGroup({ label: 'red' })
-  ])
+  tags: new FormArray([new FormGroup({ label: 'red' })]),
 });
 ```
 
 **Template Binding:**
 Use dot notation for nested controls:
+
 ```html
 <input name="meta.flags.isActive" type="checkbox" />
 ```
 
 ### Type Safety & Autosuggestion
+
 The library now extensively uses advanced TypeScript features:
+
 - **`form.value`**: Returns the unwrapped pure object type (e.g., `{ meta: { flags: { isActive: boolean } } }`).
-- **`form.get('path.to.prop')`**: Provides autocomplete for deep paths!
+- **`form.get('path.to.prop')`**: Provides autocomplete for deep paths and infers return types!
+  - `form.get('key')` returns exact control type (e.g. `FormArray`) without casting.
+
 ```typescript
 // TypeScript knows this is valid:
 this.form.get('meta.flags.isActive');
@@ -138,9 +142,10 @@ this.form.get('meta.flags.wrongProp'); // Error!
 ```
 
 ### Recursive PatchValue
+
 Update multiple fields deeply at once:
 
-```typescript
+````typescript
 this.form.patchValue({
   meta: {
     flags: {
@@ -149,11 +154,79 @@ this.form.patchValue({
   }
 });
 // Only updates 'isActive', leaves other fields untouched.
-```
+````
+
+### Dynamic Array Inputs (FormArray)
+
+For lists of primitive values, use `FormArray` with an `itemFactory` and automatic model binding. This removes the need for manual population.
+
+#### Full Working Example
+
+```typescript
+import { Component, html, LitElement, property } from '@rxdi/lit-html';
+import { Form, FormGroup, FormArray } from '@rxdi/forms';
+
+
+@Component({
+  selector: 'tags-component',
+  template(this: TagsComponent) {
+    return html`
+      <form @submit=${(e) => e.preventDefault()}>
+        <h3>Tags</h3>
+
+        <!-- List Tags -->
+        ${this.form.get('tags').controls.map(
+          (control, index) => html`
+            <div class="tag-row">
+              <input name="tags[${index}].value" .value=${control.value.value} @blur=${() => this.requestUpdate()} />
+              <button type="button" @click=${() => this.removeTag(index)}>Remove</button>
+            </div>
+          `
+        )}
+
+        <button type="button" @click=${() => this.addTag()}>Add Tag</button>
+        <button type="button" @click=${() => this.onSubmit()}>Submit</button>
+      </form>
+    `;
+  },
+})
+export class TagsComponent extends LitElement {
+  // Model automatically binds to 'tags' in form
+  @property({ type: Array })
+  tags = ['news', 'tech'];
+
+  @Form({
+    name: 'tags-form',
+    model: 'tags', // Triggers form.patchValue(this.tags) on INIT
+  })
+  form = new FormGroup({
+    tags: new FormArray<{ value: string }>([], {
+      name: 'tags',
+      // Factory describes how to create new controls from model data
+      itemFactory: (value) => new FormGroup({ value: value.value || value }),
+    }),
+  });
+
+  addTag() {
+    this.form.get('tags').push(new FormGroup({ value: '' }));
+  }
+
+  removeTag(index: number) {
+    this.form.get('tags').removeAt(index);
+  }
+
+  onSubmit() {
+    const dirtyTags = this.form.value.tags;
+    console.log(dirtyTags.map((t) => t.value));
+  }
+}
+
+````
 
 ## API Reference
 
 ### Validators
+
 Validators are async functions returning `InputErrorMessage` or `void`.
 
 ```typescript
@@ -165,11 +238,12 @@ export function CustomValidator(element: AbstractInput) {
 
 // Usage
 new FormGroup({
-  field: ['', [CustomValidator]]
-})
+  field: ['', [CustomValidator]],
+});
 ```
 
 ### Error Display Information
+
 Use the `touched` and `validity.valid` properties for clean UI.
 
 ```typescript
@@ -200,15 +274,9 @@ form = new FormGroup({
 ```
 
 ```html
-<label>
-  <input name="roles" type="checkbox" value="admin" /> Admin
-</label>
-<label>
-  <input name="roles" type="checkbox" value="editor" /> Editor
-</label>
-<label>
-  <input name="roles" type="checkbox" value="viewer" /> Viewer
-</label>
+<label> <input name="roles" type="checkbox" value="admin" /> Admin </label>
+<label> <input name="roles" type="checkbox" value="editor" /> Editor </label>
+<label> <input name="roles" type="checkbox" value="viewer" /> Viewer </label>
 ```
 
 If the user checks "Admin" and "Viewer", `form.value.roles` will be `['admin', 'viewer']`.
@@ -228,13 +296,10 @@ form = new FormGroup({
 ```
 
 ```html
-<label>
-  <input name="mode" type="checkbox" value="dark" /> Dark
-</label>
-<label>
-  <input name="mode" type="checkbox" value="light" /> Light
-</label>
+<label> <input name="mode" type="checkbox" value="dark" /> Dark </label>
+<label> <input name="mode" type="checkbox" value="light" /> Light </label>
 ```
+
 Checking "Dark" unchecks "Light" automatically.
 
 ### 3. Framework-Agnostic Usage (Vanilla JS)
@@ -246,7 +311,7 @@ import { FormGroup } from '@rxdi/forms';
 
 const form = new FormGroup({
   email: '',
-  password: ''
+  password: '',
 });
 
 // manually attach to DOM
@@ -259,7 +324,7 @@ form
   .setInputs(form.mapEventToInputs(form.querySelectorAllInputs()));
 
 // Listen to changes
-form.valueChanges.subscribe(val => console.log(val));
+form.valueChanges.subscribe((val) => console.log(val));
 ```
 
 ### 4. Custom Error Handling Strategies
@@ -284,7 +349,7 @@ async validateEmail(element: HTMLInputElement) {
 }
 
 // In Template
-${this.form.hasError('email', 'emailExists') 
-  ? html`<div class="error">Email taken!</div>` 
+${this.form.hasError('email', 'emailExists')
+  ? html`<div class="error">Email taken!</div>`
   : ''}
-```
+```

package/dist/form.array.d.ts

@@ -1,6 +1,9 @@
 import { LitElement } from '@rxdi/lit-html';
 import { BehaviorSubject } from 'rxjs';
 import { AbstractControl, FormOptions } from './form.tokens';
+export interface FormArrayOptions<T = any> extends FormOptions {
+    itemFactory?: (value: T) => AbstractControl;
+}
 export declare class FormArray<T = any> implements AbstractControl<T[]> {
     controls: AbstractControl<T>[];
     readonly valueChanges: BehaviorSubject<T[]>;
@@ -13,9 +16,9 @@ export declare class FormArray<T = any> implements AbstractControl<T[]> {
     private form;
     private options;
     private subscriptions;
-    constructor(controls?: AbstractControl<T>[], name?: string);
+    constructor(controls?: AbstractControl<T>[], nameOrOptions?: string | FormArrayOptions<T>);
     get value(): T[];
-    getOptions(): FormOptions;
+    getOptions(): FormArrayOptions<T>;
     setOptions(options: FormOptions): void;
     push(control: AbstractControl<T>): Promise<void>;
     removeAt(index: number): void;
@@ -28,4 +31,5 @@ export declare class FormArray<T = any> implements AbstractControl<T[]> {
     init(): void;
     getParentElement(): LitElement;
     set value(values: T[]);
+    patchValue(values: T[]): void;
 }

package/dist/form.array.js

@@ -12,7 +12,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormArray = void 0;
 const rxjs_1 = require("rxjs");
 class FormArray {
-    constructor(controls = [], name = '') {
+    constructor(controls = [], nameOrOptions = '') {
         this.controls = [];
         this.valid = true;
         this.invalid = false;
@@ -20,7 +20,13 @@ class FormArray {
         this.options = {};
         this.subscriptions = new Map();
         this.controls = controls;
-        this.name = name;
+        if (typeof nameOrOptions === 'string') {
+            this.name = nameOrOptions;
+        }
+        else {
+            this.name = nameOrOptions.name || '';
+            this.options = nameOrOptions;
+        }
         this._valueChanges = new rxjs_1.BehaviorSubject(this.value);
         this.valueChanges = this._valueChanges;
         this.controls.forEach((c) => this.subscribeToControl(c));
@@ -32,7 +38,7 @@ class FormArray {
         return this.options;
     }
     setOptions(options) {
-        this.options = options;
+        this.options = Object.assign(Object.assign({}, this.options), options);
         this.controls.forEach((c, index) => {
             c.setOptions(Object.assign(Object.assign({}, options), { namespace: `${this.name}[${index}]` }));
         });
@@ -82,15 +88,14 @@ class FormArray {
     unsubscribe() {
         this.subscriptions.forEach((sub) => sub.unsubscribe());
         this.subscriptions.clear();
-        this.controls.forEach((c) => c.unsubscribe && c.unsubscribe());
+        this.controls.forEach((c) => { var _a; return (_a = c.unsubscribe) === null || _a === void 0 ? void 0 : _a.call(c); });
     }
     updateValue() {
         this._valueChanges.next(this.value);
     }
     requestUpdate() {
-        if (this.parentElement) {
-            this.parentElement.requestUpdate();
-        }
+        var _a;
+        (_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.requestUpdate();
     }
     setParentElement(parent) {
         this.parentElement = parent;
@@ -112,8 +117,21 @@ class FormArray {
             return;
         }
         values.forEach((v, i) => {
-            if (this.controls[i]) {
-                this.controls[i].value = v;
+            this.controls[i] && (this.controls[i].value = v);
+        });
+        this.updateValue();
+    }
+    patchValue(values) {
+        if (!Array.isArray(values)) {
+            return;
+        }
+        values.forEach((v, i) => {
+            const control = this.controls[i];
+            if (control) {
+                control.patchValue ? control.patchValue(v) : (control.value = v);
+            }
+            else if (this.options.itemFactory) {
+                this.push(this.options.itemFactory(v));
             }
         });
         this.updateValue();

package/dist/form.group.d.ts

@@ -1,5 +1,5 @@
 import { LitElement } from '@rxdi/lit-html';
-import { AbstractControl, AbstractInput, ErrorObject, FormInputOptions, FormOptions, NestedKeyOf, UnwrapValue, ValidatorFn } from './form.tokens';
+import { AbstractControl, AbstractInput, DeepPropType, ErrorObject, FormInputOptions, FormOptions, NestedKeyOf, UnwrapValue, ValidatorFn } from './form.tokens';
 export declare class FormGroup<T = FormInputOptions, E = {
     [key: string]: never;
 }> implements AbstractControl<UnwrapValue<T>> {
@@ -38,7 +38,7 @@ export declare class FormGroup<T = FormInputOptions, E = {
     private getModelKeyName;
     validate(element: AbstractInput): Promise<ErrorObject>;
     private mapInputErrors;
-    get<K extends NestedKeyOf<T>>(name: K): AbstractControl | AbstractInput;
+    get<K extends NestedKeyOf<T>>(name: K): DeepPropType<T, K>;
     getError(inputName: keyof T, errorKey: string): never;
     hasError(inputName: keyof T, errorKey: string): boolean;
     reset(): void;

package/dist/form.group.js

@@ -46,10 +46,13 @@ class FormGroup {
         }
     }
     init() {
+        if (!this.parentElement) {
+            return;
+        }
         this.setFormElement(this.querySelectForm(this.parentElement.shadowRoot || this.parentElement)).setInputs(this.mapEventToInputs(this.querySelectorAllInputs()));
         this.controls.forEach((c) => {
-            if (c.init)
-                c.init();
+            var _a;
+            (_a = c.init) === null || _a === void 0 ? void 0 : _a.call(c);
         });
     }
     prepareValues() {
@@ -84,9 +87,8 @@ class FormGroup {
     setParentElement(parent) {
         this.parentElement = parent;
         this.controls.forEach((c) => {
-            if (c.setParentElement) {
-                c.setParentElement(parent);
-            }
+            var _a;
+            (_a = c.setParentElement) === null || _a === void 0 ? void 0 : _a.call(c, parent);
         });
         return this;
     }
@@ -96,9 +98,8 @@ class FormGroup {
     setOptions(options) {
         this.options = options;
         this.controls.forEach((c) => {
-            if (c.setOptions) {
-                c.setOptions(Object.assign(Object.assign({}, options), { namespace: this.options.namespace ? `${this.options.namespace}.${c.name}` : c.name }));
-            }
+            var _a;
+            (_a = c.setOptions) === null || _a === void 0 ? void 0 : _a.call(c, Object.assign(Object.assign({}, options), { namespace: this.options.namespace ? `${this.options.namespace}.${c.name}` : c.name }));
         });
         return this;
     }
@@ -200,6 +201,9 @@ class FormGroup {
         if (this.options['form']) {
             return this.options['form'];
         }
+        if (!(shadowRoot === null || shadowRoot === void 0 ? void 0 : shadowRoot.querySelector)) {
+            return null;
+        }
         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`);
@@ -335,7 +339,7 @@ class FormGroup {
             const names = String(name).split('.');
             const key = names.shift();
             const control = this.controls.get(key);
-            if (control && control.get) {
+            if (control === null || control === void 0 ? void 0 : control.get) {
                 return control.get(names.join('.'));
             }
         }
@@ -390,8 +394,9 @@ class FormGroup {
             return;
         }
         Object.keys(value).forEach((key) => {
-            if (this.controls.has(key) && this.controls.get(key)['patchValue']) {
-                this.controls.get(key)['patchValue'](value[key]);
+            const control = this.controls.get(key);
+            if (control === null || control === void 0 ? void 0 : control['patchValue']) {
+                control['patchValue'](value[key]);
             }
             else {
                 this.setValue(key, value[key]);
@@ -417,8 +422,8 @@ class FormGroup {
     setFormElement(form) {
         this.form = form;
         this.controls.forEach((c) => {
-            if (c.setFormElement)
-                c.setFormElement(form);
+            var _a;
+            (_a = c.setFormElement) === null || _a === void 0 ? void 0 : _a.call(c, form);
         });
         return this;
     }

package/dist/form.tokens.d.ts

@@ -9,6 +9,7 @@ type Prev = [never, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, ...0[]];
 export type NestedKeyOf<T, D extends number = 3> = [D] extends [0] ? never : T extends object ? {
     [K in keyof T & (string | number)]: T[K] extends AbstractControl<infer U> ? U extends object ? `${K}` | `${K}.${NestedKeyOf<U, Prev[D]>}` : `${K}` : T[K] extends object ? `${K}` | `${K}.${NestedKeyOf<T[K], Prev[D]>}` : `${K}`;
 }[keyof T & (string | number)] : never;
+export type DeepPropType<T, P extends string> = P extends keyof T ? T[P] : P extends `${infer K}.${infer R}` ? K extends keyof T ? DeepPropType<T[K], R> : any : any;
 export type FormStrategies = keyof WindowEventMap;
 export interface FormOptions {
     /** Name of the form element */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rxdi/forms",
-  "version": "0.7.214",
+  "version": "0.7.216",
   "main": "./dist/index.js",
   "author": "Kristiyan Tachev",
   "license": "MIT",
@@ -12,7 +12,7 @@
     "build": "tsc"
   },
   "devDependencies": {
-    "@rxdi/lit-html": "^0.7.213",
+    "@rxdi/lit-html": "^0.7.215",
     "@types/node": "^25.0.3",
     "rxjs": "^7.8.2",
     "typescript": "^5.9.3"