@ng-modular-forms/core 0.7.6 → 0.7.8

package/fesm2022/ng-modular-forms-core.mjs

@@ -18,6 +18,7 @@ class FormControlBase {
     placeholder = input('');
     _disabledByInput = input(false, {
         transform: booleanAttribute,
+        alias: 'disabledOverride',
     });
     _disabledByCva = signal(false);
     ngControl = inject(NgControl, {
@@ -105,7 +106,7 @@ class FormControlBase {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: FormControlBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.21", type: FormControlBase, isStandalone: true, inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, classList: { classPropertyName: "classList", publicName: "classList", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, _disabledByInput: { classPropertyName: "_disabledByInput", publicName: "_disabledByInput", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.21", type: FormControlBase, isStandalone: true, inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, classList: { classPropertyName: "classList", publicName: "classList", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, _disabledByInput: { classPropertyName: "_disabledByInput", publicName: "disabledOverride", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: FormControlBase, decorators: [{
             type: Directive
@@ -186,6 +187,13 @@ class FormHandlerBase {
             this.registeredControls[controlName] = control;
         });
     }
+    getControl(key) {
+        const control = this.registeredControls[key];
+        if (!control) {
+            throw new Error(`Control with name: "${key}" not found. Ensure it is registered in registerControls(...) before usage.`);
+        }
+        return control;
+    }
     valueChangesOf(key) {
         const control = this.registeredControls[key];
         if (!control) {
@@ -199,7 +207,7 @@ class FormMapperBase {
     fromModel(model) {
         return structuredClone(model);
     }
-    toRequest(formValue) {
+    toRequest(formValue, _options) {
         return formValue;
     }
 }
@@ -260,6 +268,71 @@ class TextBehavior {
     }
 }
 
+class FormFieldComponent {
+    label = input();
+    isRequired = input();
+    loading = input();
+    errorMessage = input();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: FormFieldComponent, isStandalone: true, selector: "nmf-form-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, isRequired: { classPropertyName: "isRequired", publicName: "isRequired", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div class="nmf-field" [class.loading]="loading()">
+      @if (label()) {
+        <label class="nmf-label">
+          {{ label() }}
+          @if (isRequired()) {
+            <span class="nmf-required">*</span>
+          }
+        </label>
+      }
+
+      <ng-content></ng-content>
+
+      @if (loading()) {
+        <div class="nmf-loading">
+          <span class="nmf-spinner"></span>
+        </div>
+      }
+
+      <p class="nmf-error">
+        {{ errorMessage() }}
+      </p>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: FormFieldComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'nmf-form-field',
+                    standalone: true,
+                    imports: [CommonModule, ReactiveFormsModule],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <div class="nmf-field" [class.loading]="loading()">
+      @if (label()) {
+        <label class="nmf-label">
+          {{ label() }}
+          @if (isRequired()) {
+            <span class="nmf-required">*</span>
+          }
+        </label>
+      }
+
+      <ng-content></ng-content>
+
+      @if (loading()) {
+        <div class="nmf-loading">
+          <span class="nmf-spinner"></span>
+        </div>
+      }
+
+      <p class="nmf-error">
+        {{ errorMessage() }}
+      </p>
+    </div>
+  `,
+                }]
+        }] });
+
 class InputCurrencyComponent extends FormControlBase {
     displayValue = signal(null);
     behavior = new CurrencyBehavior();
@@ -289,16 +362,12 @@ class InputCurrencyComponent extends FormControlBase {
     });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: InputCurrencyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: InputCurrencyComponent, isStandalone: true, selector: "nmf-currency", usesInheritance: true, ngImport: i0, template: `
-    <div class="nmf-field">
-      @if (label()) {
-        <label class="nmf-label">
-          {{ label() }}
-          @if (isRequired()) {
-            <span class="nmf-required">*</span>
-          }
-        </label>
-      }
-
+    <nmf-form-field
+      [label]="label()"
+      [isRequired]="isRequired()"
+      [loading]="loading()"
+      [errorMessage]="errorMessage()"
+    >
       <div class="nmf-input-wrapper nmf-input-prefix">
         @if (displayValue() != null) {
           <span
@@ -331,39 +400,23 @@ class InputCurrencyComponent extends FormControlBase {
           (keydown)="handleKeyDown($event)"
         />
       </div>
-
-      <ng-content></ng-content>
-
-      @if (loading()) {
-        <div class="nmf-loading">
-          <span class="nmf-spinner"></span>
-        </div>
-      }
-
-      <p class="nmf-error">
-        {{ errorMessage() }}
-      </p>
-    </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    </nmf-form-field>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: FormFieldComponent, selector: "nmf-form-field", inputs: ["label", "isRequired", "loading", "errorMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: InputCurrencyComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'nmf-currency',
                     standalone: true,
-                    imports: [CommonModule, ReactiveFormsModule],
+                    imports: [CommonModule, ReactiveFormsModule, FormFieldComponent],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
-    <div class="nmf-field">
-      @if (label()) {
-        <label class="nmf-label">
-          {{ label() }}
-          @if (isRequired()) {
-            <span class="nmf-required">*</span>
-          }
-        </label>
-      }
-
+    <nmf-form-field
+      [label]="label()"
+      [isRequired]="isRequired()"
+      [loading]="loading()"
+      [errorMessage]="errorMessage()"
+    >
       <div class="nmf-input-wrapper nmf-input-prefix">
         @if (displayValue() != null) {
           <span
@@ -396,19 +449,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
           (keydown)="handleKeyDown($event)"
         />
       </div>
-
-      <ng-content></ng-content>
-
-      @if (loading()) {
-        <div class="nmf-loading">
-          <span class="nmf-spinner"></span>
-        </div>
-      }
-
-      <p class="nmf-error">
-        {{ errorMessage() }}
-      </p>
-    </div>
+    </nmf-form-field>
   `,
                 }]
         }] });
@@ -445,17 +486,13 @@ class InputDatepickerComponent extends FormControlBase {
         this.onChange(parsed);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: InputDatepickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: InputDatepickerComponent, isStandalone: true, selector: "nmf-datepicker", inputs: { minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
-    <div class="nmf-field" [class.loading]="loading()">
-      @if (label()) {
-        <label class="nmf-label">
-          {{ label() }}
-          @if (isRequired()) {
-            <span class="nmf-required">*</span>
-          }
-        </label>
-      }
-
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.21", type: InputDatepickerComponent, isStandalone: true, selector: "nmf-datepicker", inputs: { minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    <nmf-form-field
+      [label]="label()"
+      [isRequired]="isRequired()"
+      [loading]="loading()"
+      [errorMessage]="errorMessage()"
+    >
       <input
         type="date"
         class="nmf-input"
@@ -473,39 +510,23 @@ class InputDatepickerComponent extends FormControlBase {
         (blur)="onTouched()"
         (input)="onInput($event)"
       />
-
-      <ng-content></ng-content>
-
-      @if (loading()) {
-        <div class="nmf-loading">
-          <span class="nmf-spinner"></span>
-        </div>
-      }
-
-      <p class="nmf-error">
-        {{ errorMessage() }}
-      </p>
-    </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    </nmf-form-field>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: FormFieldComponent, selector: "nmf-form-field", inputs: ["label", "isRequired", "loading", "errorMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: InputDatepickerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'nmf-datepicker',
                     standalone: true,
-                    imports: [CommonModule, ReactiveFormsModule],
+                    imports: [CommonModule, ReactiveFormsModule, FormFieldComponent],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
-    <div class="nmf-field" [class.loading]="loading()">
-      @if (label()) {
-        <label class="nmf-label">
-          {{ label() }}
-          @if (isRequired()) {
-            <span class="nmf-required">*</span>
-          }
-        </label>
-      }
-
+    <nmf-form-field
+      [label]="label()"
+      [isRequired]="isRequired()"
+      [loading]="loading()"
+      [errorMessage]="errorMessage()"
+    >
       <input
         type="date"
         class="nmf-input"
@@ -523,25 +544,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
         (blur)="onTouched()"
         (input)="onInput($event)"
       />
-
-      <ng-content></ng-content>
-
-      @if (loading()) {
-        <div class="nmf-loading">
-          <span class="nmf-spinner"></span>
-        </div>
-      }
-
-      <p class="nmf-error">
-        {{ errorMessage() }}
-      </p>
-    </div>
+    </nmf-form-field>
   `,
                 }]
         }] });
 
 class InputNumberComponent extends FormControlBase {
-    formatNumberValue = input(false);
+    formatValue = input(false);
     displayValue = signal('');
     behavior = new TextBehavior();
     currencyBehavior = new CurrencyBehavior();
@@ -561,7 +570,7 @@ class InputNumberComponent extends FormControlBase {
         this.onChange(parsed);
     }
     updateDisplayValue(value) {
-        if (this.formatNumberValue() && value != null) {
+        if (this.formatValue() && value != null) {
             this.displayValue.set(formatNumber(value) ?? '');
         }
         else {
@@ -569,17 +578,13 @@ class InputNumberComponent extends FormControlBase {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: InputNumberComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: InputNumberComponent, isStandalone: true, selector: "nmf-number", inputs: { formatNumberValue: { classPropertyName: "formatNumberValue", publicName: "formatNumberValue", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
-    <div class="nmf-field">
-      @if (label()) {
-        <label class="nmf-label">
-          {{ label() }}
-          @if (isRequired()) {
-            <span class="nmf-required">*</span>
-          }
-        </label>
-      }
-
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.21", type: InputNumberComponent, isStandalone: true, selector: "nmf-number", inputs: { formatValue: { classPropertyName: "formatValue", publicName: "formatValue", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    <nmf-form-field
+      [label]="label()"
+      [isRequired]="isRequired()"
+      [loading]="loading()"
+      [errorMessage]="errorMessage()"
+    >
       <input
         autocomplete="off"
         class="nmf-input"
@@ -588,7 +593,7 @@ class InputNumberComponent extends FormControlBase {
         [class.disabled]="disabled()"
         [id]="id()"
         [name]="name()"
-        [type]="formatNumberValue() ? 'text' : 'number'"
+        [type]="formatValue() ? 'text' : 'number'"
         [value]="displayValue()"
         [disabled]="disabled()"
         [required]="isRequired()"
@@ -597,39 +602,23 @@ class InputNumberComponent extends FormControlBase {
         (input)="onInput($event)"
         (keydown)="handleKeyDown($event)"
       />
-
-      <ng-content></ng-content>
-
-      <p class="nmf-error">
-        {{ errorMessage() }}
-      </p>
-
-      @if (loading()) {
-        <div class="nmf-loading">
-          <span class="nmf-spinner"></span>
-        </div>
-      }
-    </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    </nmf-form-field>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: FormFieldComponent, selector: "nmf-form-field", inputs: ["label", "isRequired", "loading", "errorMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: InputNumberComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'nmf-number',
                     standalone: true,
-                    imports: [CommonModule, ReactiveFormsModule],
+                    imports: [CommonModule, ReactiveFormsModule, FormFieldComponent],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
-    <div class="nmf-field">
-      @if (label()) {
-        <label class="nmf-label">
-          {{ label() }}
-          @if (isRequired()) {
-            <span class="nmf-required">*</span>
-          }
-        </label>
-      }
-
+    <nmf-form-field
+      [label]="label()"
+      [isRequired]="isRequired()"
+      [loading]="loading()"
+      [errorMessage]="errorMessage()"
+    >
       <input
         autocomplete="off"
         class="nmf-input"
@@ -638,7 +627,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
         [class.disabled]="disabled()"
         [id]="id()"
         [name]="name()"
-        [type]="formatNumberValue() ? 'text' : 'number'"
+        [type]="formatValue() ? 'text' : 'number'"
         [value]="displayValue()"
         [disabled]="disabled()"
         [required]="isRequired()"
@@ -647,19 +636,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
         (input)="onInput($event)"
         (keydown)="handleKeyDown($event)"
       />
-
-      <ng-content></ng-content>
-
-      <p class="nmf-error">
-        {{ errorMessage() }}
-      </p>
-
-      @if (loading()) {
-        <div class="nmf-loading">
-          <span class="nmf-spinner"></span>
-        </div>
-      }
-    </div>
+    </nmf-form-field>
   `,
                 }]
         }] });
@@ -670,15 +647,12 @@ class InputSelectComponent extends FormControlBase {
     clearOptionLabel = input('Clear selection');
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: InputSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: InputSelectComponent, isStandalone: true, selector: "nmf-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, emptyOptionLabel: { classPropertyName: "emptyOptionLabel", publicName: "emptyOptionLabel", isSignal: true, isRequired: false, transformFunction: null }, clearOptionLabel: { classPropertyName: "clearOptionLabel", publicName: "clearOptionLabel", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
-    <div class="nmf-field" [class.loading]="loading()">
-      @if (label()) {
-        <label class="nmf-label">
-          {{ label() }}
-          @if (isRequired()) {
-            <span class="nmf-required">*</span>
-          }
-        </label>
-      }
+    <nmf-form-field
+      [label]="label()"
+      [isRequired]="isRequired()"
+      [loading]="loading()"
+      [errorMessage]="errorMessage()"
+    >
       <div class="select-wrapper" [class.disabled]="disabled()">
         <select
           class="nmf-input"
@@ -709,36 +683,23 @@ class InputSelectComponent extends FormControlBase {
           }
         </select>
       </div>
-
-      @if (loading()) {
-        <div class="nmf-loading">
-          <span class="nmf-spinner"></span>
-        </div>
-      }
-
-      <p class="nmf-error">
-        {{ errorMessage() }}
-      </p>
-    </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    </nmf-form-field>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: FormFieldComponent, selector: "nmf-form-field", inputs: ["label", "isRequired", "loading", "errorMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: InputSelectComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'nmf-select',
                     standalone: true,
-                    imports: [CommonModule, ReactiveFormsModule],
+                    imports: [CommonModule, ReactiveFormsModule, FormFieldComponent],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
-    <div class="nmf-field" [class.loading]="loading()">
-      @if (label()) {
-        <label class="nmf-label">
-          {{ label() }}
-          @if (isRequired()) {
-            <span class="nmf-required">*</span>
-          }
-        </label>
-      }
+    <nmf-form-field
+      [label]="label()"
+      [isRequired]="isRequired()"
+      [loading]="loading()"
+      [errorMessage]="errorMessage()"
+    >
       <div class="select-wrapper" [class.disabled]="disabled()">
         <select
           class="nmf-input"
@@ -769,17 +730,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
           }
         </select>
       </div>
-
-      @if (loading()) {
-        <div class="nmf-loading">
-          <span class="nmf-spinner"></span>
-        </div>
-      }
-
-      <p class="nmf-error">
-        {{ errorMessage() }}
-      </p>
-    </div>
+    </nmf-form-field>
   `,
                 }]
         }] });
@@ -792,16 +743,12 @@ class InputTextComponent extends FormControlBase {
         : this.type());
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: InputTextComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: InputTextComponent, isStandalone: true, selector: "nmf-text", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
-    <div class="nmf-field">
-      @if (label()) {
-        <label class="nmf-label">
-          {{ label() }}
-          @if (isRequired()) {
-            <span class="nmf-required">*</span>
-          }
-        </label>
-      }
-
+    <nmf-form-field
+      [label]="label()"
+      [isRequired]="isRequired()"
+      [loading]="loading()"
+      [errorMessage]="errorMessage()"
+    >
       <div class="nmf-input-wrapper">
         <input
           class="nmf-input"
@@ -832,19 +779,7 @@ class InputTextComponent extends FormControlBase {
           </button>
         }
       </div>
-
-      <ng-content></ng-content>
-
-      <p class="nmf-error">
-        {{ errorMessage() }}
-      </p>
-
-      @if (loading()) {
-        <div class="nmf-loading">
-          <span class="nmf-spinner"></span>
-        </div>
-      }
-    </div>
+    </nmf-form-field>
 
     <ng-template #eyeIcon>
       <svg
@@ -880,26 +815,22 @@ class InputTextComponent extends FormControlBase {
         />
       </svg>
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: FormFieldComponent, selector: "nmf-form-field", inputs: ["label", "isRequired", "loading", "errorMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: InputTextComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'nmf-text',
                     standalone: true,
-                    imports: [CommonModule, ReactiveFormsModule],
+                    imports: [CommonModule, ReactiveFormsModule, FormFieldComponent],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
-    <div class="nmf-field">
-      @if (label()) {
-        <label class="nmf-label">
-          {{ label() }}
-          @if (isRequired()) {
-            <span class="nmf-required">*</span>
-          }
-        </label>
-      }
-
+    <nmf-form-field
+      [label]="label()"
+      [isRequired]="isRequired()"
+      [loading]="loading()"
+      [errorMessage]="errorMessage()"
+    >
       <div class="nmf-input-wrapper">
         <input
           class="nmf-input"
@@ -930,19 +861,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
           </button>
         }
       </div>
-
-      <ng-content></ng-content>
-
-      <p class="nmf-error">
-        {{ errorMessage() }}
-      </p>
-
-      @if (loading()) {
-        <div class="nmf-loading">
-          <span class="nmf-spinner"></span>
-        </div>
-      }
-    </div>
+    </nmf-form-field>
 
     <ng-template #eyeIcon>
       <svg
@@ -986,17 +905,13 @@ class InputTextareaComponent extends FormControlBase {
     rows = input(5);
     cols = input(5);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: InputTextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: InputTextareaComponent, isStandalone: true, selector: "nmf-textarea", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, cols: { classPropertyName: "cols", publicName: "cols", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
-    <div class="nmf-field">
-      @if (label()) {
-        <label class="nmf-label">
-          {{ label() }}
-          @if (isRequired()) {
-            <span class="nmf-required">*</span>
-          }
-        </label>
-      }
-
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.21", type: InputTextareaComponent, isStandalone: true, selector: "nmf-textarea", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, cols: { classPropertyName: "cols", publicName: "cols", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    <nmf-form-field
+      [label]="label()"
+      [isRequired]="isRequired()"
+      [loading]="loading()"
+      [errorMessage]="errorMessage()"
+    >
       <textarea
         class="nmf-input"
         [ngClass]="classList()"
@@ -1010,37 +925,23 @@ class InputTextareaComponent extends FormControlBase {
         [formControl]="formControl"
         (blur)="onTouched()"
       ></textarea>
-
-      <p class="nmf-error">
-        {{ errorMessage() }}
-      </p>
-
-      @if (loading()) {
-        <div class="nmf-loading">
-          <span class="nmf-spinner"></span>
-        </div>
-      }
-    </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    </nmf-form-field>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: FormFieldComponent, selector: "nmf-form-field", inputs: ["label", "isRequired", "loading", "errorMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: InputTextareaComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'nmf-textarea',
                     standalone: true,
-                    imports: [CommonModule, ReactiveFormsModule],
+                    imports: [CommonModule, ReactiveFormsModule, FormFieldComponent],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
-    <div class="nmf-field">
-      @if (label()) {
-        <label class="nmf-label">
-          {{ label() }}
-          @if (isRequired()) {
-            <span class="nmf-required">*</span>
-          }
-        </label>
-      }
-
+    <nmf-form-field
+      [label]="label()"
+      [isRequired]="isRequired()"
+      [loading]="loading()"
+      [errorMessage]="errorMessage()"
+    >
       <textarea
         class="nmf-input"
         [ngClass]="classList()"
@@ -1054,17 +955,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
         [formControl]="formControl"
         (blur)="onTouched()"
       ></textarea>
-
-      <p class="nmf-error">
-        {{ errorMessage() }}
-      </p>
-
-      @if (loading()) {
-        <div class="nmf-loading">
-          <span class="nmf-spinner"></span>
-        </div>
-      }
-    </div>
+    </nmf-form-field>
   `,
                 }]
         }] });
@@ -1102,17 +993,13 @@ class InputTimepickerComponent extends FormControlBase {
         this.onChange(parsed);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: InputTimepickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: InputTimepickerComponent, isStandalone: true, selector: "nmf-timepicker", inputs: { step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
-    <div class="nmf-field" [class.loading]="loading()">
-      @if (label()) {
-        <label class="nmf-label">
-          {{ label() }}
-          @if (isRequired()) {
-            <span class="nmf-required">*</span>
-          }
-        </label>
-      }
-
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.21", type: InputTimepickerComponent, isStandalone: true, selector: "nmf-timepicker", inputs: { step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    <nmf-form-field
+      [label]="label()"
+      [isRequired]="isRequired()"
+      [loading]="loading()"
+      [errorMessage]="errorMessage()"
+    >
       <input
         type="time"
         autocomplete="off"
@@ -1130,39 +1017,23 @@ class InputTimepickerComponent extends FormControlBase {
         (blur)="onTouched()"
         (input)="onInput($event)"
       />
-
-      <ng-content></ng-content>
-
-      @if (loading()) {
-        <div class="nmf-loading">
-          <span class="nmf-spinner"></span>
-        </div>
-      }
-
-      <p class="nmf-error">
-        {{ errorMessage() }}
-      </p>
-    </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    </nmf-form-field>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: FormFieldComponent, selector: "nmf-form-field", inputs: ["label", "isRequired", "loading", "errorMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: InputTimepickerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'nmf-timepicker',
                     standalone: true,
-                    imports: [CommonModule, ReactiveFormsModule],
+                    imports: [CommonModule, ReactiveFormsModule, FormFieldComponent],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
-    <div class="nmf-field" [class.loading]="loading()">
-      @if (label()) {
-        <label class="nmf-label">
-          {{ label() }}
-          @if (isRequired()) {
-            <span class="nmf-required">*</span>
-          }
-        </label>
-      }
-
+    <nmf-form-field
+      [label]="label()"
+      [isRequired]="isRequired()"
+      [loading]="loading()"
+      [errorMessage]="errorMessage()"
+    >
       <input
         type="time"
         autocomplete="off"
@@ -1180,19 +1051,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
         (blur)="onTouched()"
         (input)="onInput($event)"
       />
-
-      <ng-content></ng-content>
-
-      @if (loading()) {
-        <div class="nmf-loading">
-          <span class="nmf-spinner"></span>
-        </div>
-      }
-
-      <p class="nmf-error">
-        {{ errorMessage() }}
-      </p>
-    </div>
+    </nmf-form-field>
   `,
                 }]
         }] });
@@ -1232,14 +1091,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
         }] });
 
 class FormSerializer {
-    toRequest(form, registry = {}) {
+    toRequest(form, registry = {}, options) {
         const result = {};
         Object.entries(form.controls).forEach(([key, control]) => {
             const mapFn = registry[key]?.toRequest;
             if (control instanceof FormGroup) {
                 result[key] = mapFn
-                    ? mapFn(control.value)
-                    : this.toRequest(control, registry);
+                    ? mapFn(control.value, options)
+                    : this.toRequest(control, registry, options);
                 return;
             }
             result[key] = control.value;
@@ -1311,7 +1170,7 @@ class FormOrchestrator extends FormMapperBase {
             if (!(key in model))
                 return;
             const mapper = registry[key];
-            const value = model?.[key];
+            const value = model[key];
             if (control instanceof FormGroup) {
                 const mapped = mapper ? mapper.fromModel(value) : value;
                 if (isRecord(mapped)) {
@@ -1320,8 +1179,8 @@ class FormOrchestrator extends FormMapperBase {
             }
         });
     }
-    buildRequest() {
-        return this.serializer.toRequest(this.form(), this.mapperRegistry());
+    buildRequest(options) {
+        return this.serializer.toRequest(this.form(), this.mapperRegistry(), options);
     }
     ngOnDestroy() {
         this._logicSubscription.unsubscribe();