@rxdi/forms 0.7.218 → 0.7.220

package/README.md

@@ -200,11 +200,10 @@ export class TagsComponent extends LitElement {
     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 }),
-    }),
+    tags: new FormArray<{ value: string }>(
+      [],
+      (value) => new FormGroup({ value: value.value || value }) // Factory handles population automatically
+    ),
   });
 
   addTag() {
@@ -223,6 +222,75 @@ export class TagsComponent extends LitElement {
 
 ````
 
+### Typed Subscriptions & Virtual Inputs
+
+You can subscribe to `valueChanges` on individual inputs, even if they aren't in the DOM yet!
+
+```typescript
+// Works even if 'email' input is inside an *ngIf or not yet rendered
+this.form.get('email').valueChanges.subscribe(value => {
+  console.log('Email changed:', value); // 'value' is strongly typed!
+});
+```
+
+This is powered by "Virtual Inputs" which mock the input interface if the model key exists but the DOM element is missing.
+
+### Working with Value Changes
+
+The `valueChanges` observable is powerful for creating interactive forms.
+
+#### 1. Debounced Search
+
+```typescript
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+
+this.form.get('search').valueChanges.pipe(
+  debounceTime(300),
+  distinctUntilChanged()
+).subscribe(term => {
+  this.searchService.search(term);
+});
+```
+
+#### 2. Dependant Fields (Cascading Dropdowns)
+
+Reset or modify dependent fields when a parent field changes.
+
+```typescript
+this.form.get('country').valueChanges.subscribe(country => {
+  // Reset state when country changes
+  this.form.get('state').value = '';
+  
+  // Update state options dynamically based on country
+  this.loadStatesFor(country);
+});
+```
+
+#### 3. Dynamic Disabling
+
+Disable controls based on the value of others.
+
+```typescript
+this.form.get('subscribeNewsletter').valueChanges.subscribe(shouldSubscribe => {
+   const emailControl = this.form.get('newsletterEmail');
+   if (shouldSubscribe) {
+     emailControl.disabled = false;
+   } else {
+     emailControl.disabled = true;
+     emailControl.value = ''; // Optional: clear value
+   }
+});
+```
+
+### Generic Typed AbstractInput
+
+`AbstractInput` is now generic, propagating types through the form.
+
+```typescript
+const emailInput: AbstractInput<string> = this.form.get('email');
+// emailInput.value is string
+```
+
 ## API Reference
 
 ### Validators

package/dist/form.array.d.ts

@@ -32,4 +32,5 @@ export declare class FormArray<T = any> implements AbstractControl<T[]> {
     getParentElement(): LitElement;
     set value(values: T[]);
     patchValue(values: T[]): void;
+    updateValueAndValidity(): Promise<any[]>;
 }

package/dist/form.array.js

@@ -138,5 +138,25 @@ class FormArray {
         });
         this.updateValue();
     }
+    updateValueAndValidity() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.valid = true;
+            this.invalid = false;
+            this.errors = {};
+            const errors = [];
+            for (const [index, control] of this.controls.entries()) {
+                if (control.updateValueAndValidity) {
+                    const result = yield control.updateValueAndValidity();
+                    if (control.invalid) {
+                        this.valid = false;
+                        this.invalid = true;
+                        this.errors[index] = result;
+                        errors.push(...result);
+                    }
+                }
+            }
+            return errors;
+        });
+    }
 }
 exports.FormArray = FormArray;

package/dist/form.group.js

@@ -121,17 +121,22 @@ class FormGroup {
                 this.setElementDirty(i);
                 return yield this.validate(i);
             })));
+            const inputsWithErrors = inputs.filter((e) => e.errors.length);
+            const nestedErrors = [];
             for (const [key, control] of this.controls.entries()) {
                 if (control.updateValueAndValidity) {
-                    yield control.updateValueAndValidity();
+                    const result = (yield control.updateValueAndValidity());
                     if (control.invalid) {
                         this.invalid = true;
                         this.valid = false;
+                        if (Array.isArray(result)) {
+                            nestedErrors.push(...result);
+                        }
                     }
                 }
             }
             this.getParentElement().requestUpdate();
-            return inputs.filter((e) => e.errors.length) || (this.invalid ? [{ message: 'Invalid Form' }] : []);
+            return [...inputsWithErrors, ...nestedErrors];
         });
     }
     updateValueAndValidityOnEvent(method) {
@@ -423,8 +428,8 @@ class FormGroup {
         }
         Object.keys(value).forEach((key) => {
             const control = this.controls.get(key);
-            if (control === null || control === void 0 ? void 0 : control['patchValue']) {
-                control['patchValue'](value[key]);
+            if (control === null || control === void 0 ? void 0 : control.patchValue) {
+                control.patchValue(value[key]);
             }
             else {
                 this.setValue(key, value[key]);

package/dist/form.tokens.d.ts

@@ -50,6 +50,9 @@ export interface AbstractControl<T = any> {
     name?: string;
     push?(control: AbstractControl): void;
     getFormElement?(): HTMLFormElement;
+    patchValue?(value: T): void;
+    validationMessage?: string;
+    get?(name: string): any;
 }
 export type ValidatorFn = (element: AbstractInput | HTMLInputElement) => Promise<InputErrorMessage | void> | InputErrorMessage | void;
 export interface FormInputOptions {
@@ -68,7 +71,7 @@ export interface AbstractInput<T = any> extends HTMLInputElement {
     invalid?: boolean;
     dirty?: boolean;
     touched?: boolean;
-    valueChanges?: Observable<any>;
+    valueChanges?: Observable<T>;
 }
 export declare const InputValidityState: {
     badInput: "badInput";

package/package.json

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