@rxdi/forms 0.7.230 → 0.7.232

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.decorator.js

@@ -18,7 +18,10 @@ function Form(options = {
             if (!(this[name] instanceof form_group_1.FormGroup)) {
                 throw new Error('Value provided is not an instance of FormGroup!');
             }
-            this[name].setParentElement(this).setOptions(options).prepareValues();
+            this[name]
+                .setParentElement(this)
+                .setOptions(options)
+                .prepareValues();
             if (options.model && this[options.model]) {
                 this[name].patchValue(this[options.model]);
             }

package/dist/form.group.d.ts

@@ -1,5 +1,8 @@
 import { LitElement } from '@rxdi/lit-html';
 import { AbstractControl, AbstractInput, DeepPropType, ErrorObject, FormInputOptions, FormOptions, NestedKeyOf, UnwrapValue, ValidatorFn } from './form.tokens';
+export interface AbstractInputWithBound extends AbstractInput {
+    _bound?: boolean;
+}
 export declare class FormGroup<T = FormInputOptions, E = {
     [key: string]: never;
 }> implements AbstractControl<UnwrapValue<T>> {

package/dist/form.group.js

@@ -170,10 +170,13 @@ 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 && this.type === 'checkbox') {
+                    if (!self.options.multi &&
+                        !this.hasAttribute('multiple') &&
+                        this.type === 'checkbox') {
                         inputsWithBindings.forEach((el) => {
                             if (el !== this)
                                 el.checked = false;
@@ -260,12 +263,15 @@ class FormGroup {
                 const attr = customAttributes.find((a) => a.name.startsWith('#'));
                 this.parentElement[attr.name.replace('#', '')] = el;
             }
-            el.addEventListener('blur', () => __awaiter(this, void 0, void 0, function* () {
-                this.setElementDirty(el);
-                yield this.parentElement.requestUpdate();
-                yield this.setElementValidity(el);
-            }));
-            el[strategy] = this.updateValueAndValidityOnEvent(el[strategy]);
+            if (!el._bound) {
+                el.addEventListener('blur', () => __awaiter(this, void 0, void 0, function* () {
+                    this.setElementDirty(el);
+                    yield this.parentElement.requestUpdate();
+                    yield this.setElementValidity(el);
+                }));
+                el[strategy] = this.updateValueAndValidityOnEvent(el[strategy]);
+                el._bound = true;
+            }
             return el;
         });
     }
@@ -310,8 +316,11 @@ class FormGroup {
     validate(element) {
         return __awaiter(this, void 0, void 0, function* () {
             let errors = [];
-            element.setCustomValidity('');
-            if (!element.checkValidity()) {
+            if (typeof element.setCustomValidity === 'function') {
+                element.setCustomValidity('');
+            }
+            if (typeof element.checkValidity === 'function' &&
+                !element.checkValidity()) {
                 return {
                     errors: errors.concat(Object.keys(form_tokens_1.InputValidityState)
                         .map((key) => element.validity[key]

package/package.json

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