@rxdi/forms 0.7.216 → 0.7.217

package/dist/form.group.js

@@ -11,6 +11,7 @@ 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 operators_1 = require("rxjs/operators");
 const form_tokens_1 = require("./form.tokens");
 class FormGroup {
     constructor(value, errors) {
@@ -44,6 +45,7 @@ class FormGroup {
                 }
             });
         }
+        this.prepareValues();
     }
     init() {
         if (!this.parentElement) {
@@ -343,7 +345,33 @@ class FormGroup {
                 return control.get(names.join('.'));
             }
         }
-        return this.inputs.get(name);
+        const input = this.inputs.get(name);
+        if (input) {
+            return input;
+        }
+        /*
+          If a user tries to subscribe on a constructor level or before the inputs are inside the DOM
+          We create a fake Virtual Input so later on when elements present on stage to get the same subscription
+        */
+        const key = name;
+        // Check if key exists in the model value even if not in inputs map
+        if (this._valueChanges.getValue() && key in this._valueChanges.getValue()) {
+            // Create a "Virtual" AbstractInput to prevent crashes and allow subscription even if no DOM element present
+            return {
+                valueChanges: this._valueChanges.pipe((0, operators_1.map)((value) => value === null || value === void 0 ? void 0 : value[key]), (0, operators_1.distinctUntilChanged)()),
+                value: this.getValue(key),
+                name: String(key),
+                valid: true,
+                invalid: false,
+                dirty: false,
+                touched: false,
+                // Mock HTMLInputElement properties to satisfy interface if needed
+                type: 'text',
+                checked: false,
+                disabled: false,
+            };
+        }
+        return undefined;
     }
     getError(inputName, errorKey) {
         return this.errors[inputName][errorKey];
@@ -431,6 +459,7 @@ class FormGroup {
         this.inputs = new Map(inputs.map((e) => {
             const key = this.getModelKeyName(e.name);
             e.value = this.getValue(key);
+            e.valueChanges = this._valueChanges.pipe((0, operators_1.map)((value) => value === null || value === void 0 ? void 0 : value[key]), (0, operators_1.distinctUntilChanged)());
             return [key, e];
         }));
     }

package/dist/form.tokens.d.ts

@@ -6,10 +6,10 @@ export type UnwrapValue<T> = T extends AbstractControl<infer U> ? U : T extends
     [K in keyof T]: UnwrapValue<T[K]>;
 } : T;
 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 ? {
+export type NestedKeyOf<T, D extends number = 3> = [D] extends [0] ? never : T extends Array<any> ? 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 DeepPropType<T, P extends string> = P extends keyof T ? T[P] extends [infer V, ValidatorFn[]] ? AbstractInput<V> : T[P] extends (infer U)[] ? AbstractInput<U> : T[P] extends string | number | boolean ? AbstractInput<T[P]> : 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 */
@@ -19,7 +19,7 @@ export interface FormOptions {
     /** Multiple input elements like checkboxes with the same name will be binded together */
     multi?: boolean;
     /** When set to true `.valueChanges` will emit values only
-     * if current input validation passes, default behavior is to emit every change fro */
+     * if current input validation passes, default behavior is to emit every change on the form */
     strict?: boolean;
     /**
      * When set form will expand capabilities by selecting another custom element made as a form element
@@ -63,11 +63,12 @@ export interface ErrorObject {
     element: HTMLInputElement;
     errors: InputErrorMessage[];
 }
-export interface AbstractInput extends HTMLInputElement {
+export interface AbstractInput<T = any> extends HTMLInputElement {
     valid?: boolean;
     invalid?: boolean;
     dirty?: boolean;
     touched?: boolean;
+    valueChanges?: Observable<any>;
 }
 export declare const InputValidityState: {
     badInput: "badInput";

package/package.json

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