@rxdi/forms 0.7.229 → 0.7.231

package/README.md

@@ -327,17 +327,17 @@ function ErrorTemplate(input: AbstractInput) {
 
 ### 1. Grouping Multiple Inputs (Checkbox Groups)
 
-By default, inputs with the same `name` attribute are treated as a single value (last write wins). However, for checkboxes, you often want an array of values.
+By default (`multi: false`), inputs with the same `name` attribute behave like radio buttons (single selection). To allow multiple selections (array of values), set `multi: true` in the form options.
 
 **Scenario:** A list of permissions where multiple can be selected.
 
 ```typescript
 @Form({
   name: 'permissions-form',
-  multi: true // Enable multi-value binding for same-name inputs
+  multi: true // Enable multi-value binding for SAME-NAME inputs
 })
 form = new FormGroup({
-  roles: [] // Will be an array of values
+  roles: [] // Will be an array of values ['admin', 'viewer']
 });
 ```
 
@@ -347,19 +347,17 @@ form = new FormGroup({
 <label> <input name="roles" type="checkbox" value="viewer" /> Viewer </label>
 ```
 
-If the user checks "Admin" and "Viewer", `form.value.roles` will be `['admin', 'viewer']`.
+### 2. Single Selection Checkbox (Default Behavior)
 
-### 2. Single Selection Checkbox (Radio Behavior with Checkboxes)
-
-If you want multiple checkboxes to act like a radio button (only one valid at a time) but with uncheck capability:
+If you want multiple checkboxes to act like a radio button (only one valid at a time) but with uncheck capability, simply use the default `multi: false`.
 
 ```typescript
 @Form({
   name: 'settings-form',
-  multi: false // Default behavior
+  // multi: false // Default behavior
 })
 form = new FormGroup({
-  mode: ''
+  mode: '' // Will be a single string 'dark' or 'light'
 });
 ```
 
@@ -368,9 +366,32 @@ form = new FormGroup({
 <label> <input name="mode" type="checkbox" value="light" /> Light </label>
 ```
 
-Checking "Dark" unchecks "Light" automatically.
+### 3. Per-Field Multi-Select Override
+
+You can mix single-select and multi-select groups in the same form by keeping the global `multi: false` (default) and adding the `multiple` attribute to specific inputs.
+
+```typescript
+@Form({
+  name: 'mixed-form',
+  multi: false // Default (Single Select)
+})
+form = new FormGroup({
+  mode: '',     // Single value
+  tags: []      // Array of values
+});
+```
+
+```html
+<!-- Single Select (Radio behavior) -->
+<input name="mode" type="checkbox" value="A" />
+<input name="mode" type="checkbox" value="B" />
+
+<!-- Multi Select (Array behavior) via 'multiple' attribute -->
+<input name="tags" type="checkbox" value="news" multiple />
+<input name="tags" type="checkbox" value="tech" multiple />
+```
 
-### 3. Framework-Agnostic Usage (Vanilla JS)
+### 4. Framework-Agnostic Usage (Vanilla JS)
 
 You can use this library without Decorators or LitHtml, with any UI library or vanilla HTML.
 

package/dist/form.group.js

@@ -76,11 +76,12 @@ class FormGroup {
                 }
                 else if (value[0].constructor === String ||
                     value[0].constructor === Number ||
-                    value[0].constructor === Boolean) {
+                    value[0].constructor === Boolean ||
+                    value[0].constructor === Array) {
                     this.value[v] = value[0];
                 }
                 else {
-                    throw new Error(`Input value must be of type 'string', 'boolean' or 'number'`);
+                    throw new Error(`Input value must be of type 'string', 'boolean', 'array' or 'number'`);
                 }
             }
         });
@@ -169,12 +170,19 @@ class FormGroup {
                         .querySelectorAll(`input[name="${this.name}"]:checked`)).values(),
                 ];
                 if (hasMultipleBindings > 1) {
-                    if (!self.options.multi && this.type === 'checkbox') {
+                    if ((self.options.multi || this.hasAttribute('multiple')) &&
+                        this.type === 'checkbox') {
                         value = inputsWithBindings.map((e) => e.value);
                     }
-                    if (self.options.multi) {
-                        inputsWithBindings.forEach((el) => (el.checked = false));
+                    if (!self.options.multi &&
+                        !this.hasAttribute('multiple') &&
+                        this.type === 'checkbox') {
+                        inputsWithBindings.forEach((el) => {
+                            if (el !== this)
+                                el.checked = false;
+                        });
                         this.checked = true;
+                        value = this.value;
                     }
                 }
                 self.resetErrors();
@@ -452,8 +460,12 @@ class FormGroup {
             // User code had return; but we might want to update model even if no input?
             //  return;
         }
-        if (input && input.value !== undefined)
+        if (input &&
+            input.value !== undefined &&
+            input.type !== 'checkbox' &&
+            input.type !== 'radio') {
             input.value = value;
+        }
         const values = this.value;
         values[name] = value;
         this.value = values;
@@ -472,7 +484,18 @@ class FormGroup {
     setInputs(inputs) {
         this.inputs = new Map(inputs.map((e) => {
             const key = this.getModelKeyName(e.name);
-            e.value = this.getValue(key);
+            const modelValue = this.getValue(key);
+            if (e.type === 'checkbox' || e.type === 'radio') {
+                if (Array.isArray(modelValue)) {
+                    e.checked = modelValue.includes(e.value);
+                }
+                else {
+                    e.checked = modelValue === e.value;
+                }
+            }
+            else {
+                e.value = modelValue;
+            }
             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/package.json

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