ngx-vest-forms 2.1.0 → 2.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +52 -12
- package/fesm2022/ngx-vest-forms.mjs +2225 -1962
- package/fesm2022/ngx-vest-forms.mjs.map +1 -1
- package/package.json +1 -1
- package/types/ngx-vest-forms.d.ts +176 -64
package/package.json
CHANGED
|
@@ -1,78 +1,114 @@
|
|
|
1
1
|
import * as _angular_core from '@angular/core';
|
|
2
2
|
import { Signal, AfterContentInit, OnDestroy, InputSignal, AfterViewInit, InjectionToken } from '@angular/core';
|
|
3
|
-
import { NgModel, NgModelGroup, AsyncValidator, AbstractControl,
|
|
3
|
+
import { ValidationErrors, NgModel, NgModelGroup, AsyncValidator, AbstractControl, NgForm, AsyncValidatorFn, FormsModule, ControlContainer, FormGroup } from '@angular/forms';
|
|
4
4
|
import { Observable } from 'rxjs';
|
|
5
5
|
import * as ngx_vest_forms from 'ngx-vest-forms';
|
|
6
6
|
import { StaticSuite } from 'vest';
|
|
7
7
|
|
|
8
|
+
/**
|
|
9
|
+
* Angular's ValidationErrors is `{ [key: string]: any }`.
|
|
10
|
+
* We extend it with Vest-specific structure for better type safety.
|
|
11
|
+
*/
|
|
12
|
+
type VestValidationErrors = {
|
|
13
|
+
/** Vest error messages array */
|
|
14
|
+
errors?: readonly string[];
|
|
15
|
+
/** Vest warning messages array */
|
|
16
|
+
warnings?: readonly string[];
|
|
17
|
+
} & ValidationErrors;
|
|
18
|
+
/**
|
|
19
|
+
* Form control status values as defined by Angular.
|
|
20
|
+
* @see AbstractControl.status
|
|
21
|
+
*/
|
|
22
|
+
type FormControlStatus = 'VALID' | 'INVALID' | 'PENDING' | 'DISABLED';
|
|
8
23
|
/**
|
|
9
24
|
* Represents the core state of an Angular form control.
|
|
10
|
-
*
|
|
25
|
+
* Uses narrower types than Angular's defaults where possible.
|
|
11
26
|
*/
|
|
12
27
|
type FormControlState = {
|
|
13
|
-
status:
|
|
14
|
-
isValid: boolean
|
|
15
|
-
isInvalid: boolean
|
|
16
|
-
isPending: boolean
|
|
17
|
-
isDisabled: boolean
|
|
18
|
-
isTouched: boolean
|
|
19
|
-
isDirty: boolean
|
|
20
|
-
isPristine: boolean
|
|
21
|
-
|
|
28
|
+
readonly status: FormControlStatus | null;
|
|
29
|
+
readonly isValid: boolean;
|
|
30
|
+
readonly isInvalid: boolean;
|
|
31
|
+
readonly isPending: boolean;
|
|
32
|
+
readonly isDisabled: boolean;
|
|
33
|
+
readonly isTouched: boolean;
|
|
34
|
+
readonly isDirty: boolean;
|
|
35
|
+
readonly isPristine: boolean;
|
|
36
|
+
/** Errors from Angular validators or Vest validation */
|
|
37
|
+
readonly errors: VestValidationErrors | null;
|
|
22
38
|
};
|
|
23
39
|
declare class FormControlStateDirective {
|
|
24
40
|
#private;
|
|
25
|
-
protected readonly contentNgModel: Signal<NgModel | undefined>;
|
|
26
|
-
protected readonly contentNgModelGroup: Signal<NgModelGroup | undefined>;
|
|
41
|
+
protected readonly contentNgModel: _angular_core.Signal<NgModel | undefined>;
|
|
42
|
+
protected readonly contentNgModelGroup: _angular_core.Signal<NgModelGroup | undefined>;
|
|
27
43
|
constructor();
|
|
28
44
|
/**
|
|
29
45
|
* Main control state computed signal (merges robust touched/dirty)
|
|
30
46
|
*/
|
|
31
|
-
readonly controlState: Signal<FormControlState>;
|
|
47
|
+
readonly controlState: _angular_core.Signal<FormControlState>;
|
|
32
48
|
/**
|
|
33
49
|
* Extracts error messages from Angular/Vest errors (recursively flattens)
|
|
34
50
|
*/
|
|
35
|
-
readonly errorMessages: Signal<
|
|
51
|
+
readonly errorMessages: _angular_core.Signal<string[]>;
|
|
36
52
|
/**
|
|
37
53
|
* ADVANCED: updateOn strategy (change/blur/submit) if available
|
|
38
54
|
*/
|
|
39
|
-
readonly updateOn: Signal<"change" | "blur" | "submit">;
|
|
55
|
+
readonly updateOn: _angular_core.Signal<"change" | "blur" | "submit">;
|
|
40
56
|
/**
|
|
41
57
|
* ADVANCED: Composite/derived signals for advanced error display logic
|
|
42
58
|
*/
|
|
43
|
-
readonly isValidTouched: Signal<boolean>;
|
|
44
|
-
readonly isInvalidTouched: Signal<boolean>;
|
|
45
|
-
readonly shouldShowErrors: Signal<boolean>;
|
|
59
|
+
readonly isValidTouched: _angular_core.Signal<boolean>;
|
|
60
|
+
readonly isInvalidTouched: _angular_core.Signal<boolean>;
|
|
61
|
+
readonly shouldShowErrors: _angular_core.Signal<boolean>;
|
|
46
62
|
/**
|
|
47
|
-
* Extracts warning messages from Vest validation results
|
|
63
|
+
* Extracts warning messages from Vest validation results.
|
|
64
|
+
* Checks two sources:
|
|
65
|
+
* 1. control.errors.warnings (when errors exist alongside warnings)
|
|
66
|
+
* 2. FormDirective.fieldWarnings (for warnings-only scenarios)
|
|
67
|
+
* This dual-source approach allows warnings to be displayed without affecting field validity.
|
|
48
68
|
*/
|
|
49
|
-
readonly warningMessages: Signal<
|
|
69
|
+
readonly warningMessages: _angular_core.Signal<string[]>;
|
|
50
70
|
/**
|
|
51
71
|
* Whether async validation is in progress
|
|
52
72
|
*/
|
|
53
|
-
readonly hasPendingValidation: Signal<boolean>;
|
|
73
|
+
readonly hasPendingValidation: _angular_core.Signal<boolean>;
|
|
54
74
|
/**
|
|
55
75
|
* Convenience signals for common state checks
|
|
56
76
|
*/
|
|
57
|
-
readonly isValid: Signal<boolean>;
|
|
58
|
-
readonly isInvalid: Signal<boolean>;
|
|
59
|
-
readonly isPending: Signal<boolean>;
|
|
60
|
-
readonly isTouched: Signal<boolean>;
|
|
61
|
-
readonly isDirty: Signal<boolean>;
|
|
62
|
-
readonly isPristine: Signal<boolean>;
|
|
63
|
-
readonly isDisabled: Signal<boolean>;
|
|
64
|
-
readonly hasErrors: Signal<boolean>;
|
|
77
|
+
readonly isValid: _angular_core.Signal<boolean>;
|
|
78
|
+
readonly isInvalid: _angular_core.Signal<boolean>;
|
|
79
|
+
readonly isPending: _angular_core.Signal<boolean>;
|
|
80
|
+
readonly isTouched: _angular_core.Signal<boolean>;
|
|
81
|
+
readonly isDirty: _angular_core.Signal<boolean>;
|
|
82
|
+
readonly isPristine: _angular_core.Signal<boolean>;
|
|
83
|
+
readonly isDisabled: _angular_core.Signal<boolean>;
|
|
84
|
+
readonly hasErrors: _angular_core.Signal<boolean>;
|
|
65
85
|
/**
|
|
66
86
|
* Whether this control has been validated at least once.
|
|
67
87
|
* True after the first validation completes, even if the user hasn't touched the field.
|
|
68
88
|
* This enables showing errors for validationConfig-triggered validations.
|
|
69
89
|
*/
|
|
70
|
-
readonly hasBeenValidated: Signal<boolean>;
|
|
90
|
+
readonly hasBeenValidated: _angular_core.Signal<boolean>;
|
|
71
91
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<FormControlStateDirective, never>;
|
|
72
92
|
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FormControlStateDirective, "[formControlState], [ngxControlState]", ["formControlState", "ngxControlState"], {}, {}, ["contentNgModel", "contentNgModelGroup"], never, true, never>;
|
|
73
93
|
}
|
|
74
94
|
|
|
75
|
-
|
|
95
|
+
/**
|
|
96
|
+
* Error display modes for form controls.
|
|
97
|
+
* - 'on-blur': Show errors after field is touched/blurred
|
|
98
|
+
* - 'on-submit': Show errors after form submission
|
|
99
|
+
* - 'on-blur-or-submit': Show errors after blur or form submission (default)
|
|
100
|
+
* - 'on-dirty': Show errors as soon as the field value changes
|
|
101
|
+
* - 'always': Show errors immediately, even on pristine fields
|
|
102
|
+
*/
|
|
103
|
+
type ScErrorDisplayMode = 'on-blur' | 'on-submit' | 'on-blur-or-submit' | 'on-dirty' | 'always';
|
|
104
|
+
/**
|
|
105
|
+
* Warning display modes for form controls.
|
|
106
|
+
* - 'on-touch': Show warnings after field is touched/blurred
|
|
107
|
+
* - 'on-validated-or-touch': Show warnings after validation runs or field is touched (default)
|
|
108
|
+
* - 'on-dirty': Show warnings as soon as the field value changes
|
|
109
|
+
* - 'always': Show warnings immediately, even on pristine fields
|
|
110
|
+
*/
|
|
111
|
+
type NgxWarningDisplayMode = 'on-touch' | 'on-validated-or-touch' | 'on-dirty' | 'always';
|
|
76
112
|
declare class FormErrorDisplayDirective {
|
|
77
113
|
#private;
|
|
78
114
|
/**
|
|
@@ -80,31 +116,36 @@ declare class FormErrorDisplayDirective {
|
|
|
80
116
|
* Works seamlessly with hostDirectives in Angular 19+.
|
|
81
117
|
*/
|
|
82
118
|
readonly errorDisplayMode: _angular_core.InputSignal<ScErrorDisplayMode>;
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
readonly
|
|
88
|
-
readonly
|
|
89
|
-
readonly
|
|
90
|
-
readonly
|
|
91
|
-
readonly
|
|
119
|
+
/**
|
|
120
|
+
* Input signal for warning display mode.
|
|
121
|
+
* Controls whether warnings are shown only after touch or also after validation.
|
|
122
|
+
*/
|
|
123
|
+
readonly warningDisplayMode: _angular_core.InputSignal<NgxWarningDisplayMode>;
|
|
124
|
+
readonly controlState: Signal<FormControlState>;
|
|
125
|
+
readonly errorMessages: Signal<string[]>;
|
|
126
|
+
readonly warningMessages: Signal<string[]>;
|
|
127
|
+
readonly hasPendingValidation: Signal<boolean>;
|
|
128
|
+
readonly isTouched: Signal<boolean>;
|
|
129
|
+
readonly isDirty: Signal<boolean>;
|
|
130
|
+
readonly isValid: Signal<boolean>;
|
|
131
|
+
readonly isInvalid: Signal<boolean>;
|
|
132
|
+
readonly hasBeenValidated: Signal<boolean>;
|
|
92
133
|
/**
|
|
93
134
|
* Expose updateOn and formSubmitted as public signals for advanced consumers.
|
|
94
135
|
* updateOn: The ngModelOptions.updateOn value for the control (change/blur/submit)
|
|
95
136
|
* formSubmitted: true after the form is submitted (if NgForm is present)
|
|
96
137
|
*/
|
|
97
|
-
readonly updateOn:
|
|
138
|
+
readonly updateOn: Signal<"change" | "blur" | "submit">;
|
|
98
139
|
/**
|
|
99
140
|
* Signal that tracks NgForm.submitted state reactively.
|
|
100
141
|
*
|
|
101
|
-
* Uses
|
|
142
|
+
* Uses a trigger signal pattern for cleaner reactive tracking:
|
|
102
143
|
* - ngSubmit: fires when form is submitted (sets NgForm.submitted = true)
|
|
103
144
|
* - statusChanges: fires after resetForm() (which sets NgForm.submitted = false)
|
|
104
145
|
*
|
|
105
146
|
* This ensures proper sync with both submit and reset operations.
|
|
106
147
|
*/
|
|
107
|
-
readonly formSubmitted:
|
|
148
|
+
readonly formSubmitted: Signal<boolean>;
|
|
108
149
|
constructor();
|
|
109
150
|
/**
|
|
110
151
|
* Determines if errors should be shown based on the specified display mode
|
|
@@ -119,22 +160,35 @@ declare class FormErrorDisplayDirective {
|
|
|
119
160
|
* (e.g., confirmPassword validated when password changes). We check hasBeenValidated to show
|
|
120
161
|
* errors in these scenarios, providing better UX and proper ARIA attributes.
|
|
121
162
|
*/
|
|
122
|
-
readonly shouldShowErrors:
|
|
163
|
+
readonly shouldShowErrors: Signal<boolean>;
|
|
123
164
|
/**
|
|
124
165
|
* Errors to display (filtered for pending state)
|
|
125
166
|
*/
|
|
126
|
-
readonly errors:
|
|
167
|
+
readonly errors: Signal<string[]>;
|
|
127
168
|
/**
|
|
128
169
|
* Warnings to display (filtered for pending state)
|
|
129
170
|
*/
|
|
130
|
-
readonly warnings:
|
|
171
|
+
readonly warnings: Signal<string[]>;
|
|
131
172
|
/**
|
|
132
173
|
* Whether the control is currently being validated (pending)
|
|
133
174
|
* Excludes pristine+untouched controls to prevent "Validating..." on initial load
|
|
134
175
|
*/
|
|
135
|
-
readonly isPending:
|
|
176
|
+
readonly isPending: Signal<boolean>;
|
|
177
|
+
/**
|
|
178
|
+
* Determines if warnings should be shown based on the specified display mode
|
|
179
|
+
* and the control's state (touched/validated/dirty).
|
|
180
|
+
*
|
|
181
|
+
* NOTE: Unlike errors, warnings can exist on VALID fields (warnings-only scenario).
|
|
182
|
+
* We don't require isInvalid() because Vest warn() tests don't affect field validity.
|
|
183
|
+
*
|
|
184
|
+
* UX Note: We include `hasBeenValidated` for `on-validated-or-touch` mode to support
|
|
185
|
+
* cross-field validation. If Field A triggers validation on Field B (via validationConfig),
|
|
186
|
+
* Field B should show warnings if it has them, even if the user hasn't touched Field B yet.
|
|
187
|
+
* Unlike errors (which block submission), warnings are informational and safe to show.
|
|
188
|
+
*/
|
|
189
|
+
readonly shouldShowWarnings: Signal<boolean>;
|
|
136
190
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<FormErrorDisplayDirective, never>;
|
|
137
|
-
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FormErrorDisplayDirective, "[formErrorDisplay], [ngxErrorDisplay]", ["formErrorDisplay", "ngxErrorDisplay"], { "errorDisplayMode": { "alias": "errorDisplayMode"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof FormControlStateDirective; inputs: {}; outputs: {}; }]>;
|
|
191
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FormErrorDisplayDirective, "[formErrorDisplay], [ngxErrorDisplay]", ["formErrorDisplay", "ngxErrorDisplay"], { "errorDisplayMode": { "alias": "errorDisplayMode"; "required": false; "isSignal": true; }; "warningDisplayMode": { "alias": "warningDisplayMode"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof FormControlStateDirective; inputs: {}; outputs: {}; }]>;
|
|
138
192
|
}
|
|
139
193
|
|
|
140
194
|
/**
|
|
@@ -158,6 +212,8 @@ declare class FormErrorDisplayDirective {
|
|
|
158
212
|
* - `'on-blur-or-submit'` (default): Show errors after blur OR form submit
|
|
159
213
|
* - `'on-blur'`: Show errors only after blur
|
|
160
214
|
* - `'on-submit'`: Show errors only after form submit
|
|
215
|
+
* - `'on-dirty'`: Show errors as soon as the field value changes
|
|
216
|
+
* - `'always'`: Show errors immediately, even on pristine fields
|
|
161
217
|
*
|
|
162
218
|
* ```html
|
|
163
219
|
* <ngx-control-wrapper [errorDisplayMode]="'on-submit'">
|
|
@@ -165,29 +221,54 @@ declare class FormErrorDisplayDirective {
|
|
|
165
221
|
* </ngx-control-wrapper>
|
|
166
222
|
* ```
|
|
167
223
|
*
|
|
224
|
+
* ### Warning Display Modes
|
|
225
|
+
* Control when warnings appear using the `warningDisplayMode` input:
|
|
226
|
+
* - `'on-validated-or-touch'` (default): Show warnings after validation runs or touch
|
|
227
|
+
* - `'on-touch'`: Show warnings only after touch/blur
|
|
228
|
+
* - `'on-dirty'`: Show warnings as soon as the field value changes
|
|
229
|
+
* - `'always'`: Show warnings immediately, even on pristine fields
|
|
230
|
+
*
|
|
231
|
+
* ```html
|
|
232
|
+
* <ngx-control-wrapper [warningDisplayMode]="'on-dirty'">
|
|
233
|
+
* <input name="email" [ngModel]="formValue().email" />
|
|
234
|
+
* </ngx-control-wrapper>
|
|
235
|
+
* ```
|
|
236
|
+
*
|
|
168
237
|
* ### Accessibility Features (Automatic)
|
|
169
238
|
* - Unique IDs for error/warning/pending regions
|
|
170
239
|
* - `aria-describedby` linking errors to form controls
|
|
171
240
|
* - `aria-invalid="true"` when errors are shown
|
|
172
|
-
* - `role="status"` with `aria-live="polite"` for non-
|
|
241
|
+
* - Uses `role="status"` with `aria-live="polite"` for non-disruptive announcements
|
|
173
242
|
* - Debounced pending state to prevent flashing for quick validations
|
|
174
243
|
*
|
|
244
|
+
* ### WCAG 2.2 AA - Error Severity Levels
|
|
245
|
+
* This component uses `role="status"` for **field-level** validation messages:
|
|
246
|
+
* - **Errors**: Non-disruptive announcement (user can continue filling other fields)
|
|
247
|
+
* - **Warnings**: Informational only, doesn't block submission
|
|
248
|
+
* - **Pending**: Status update while async validation runs
|
|
249
|
+
*
|
|
250
|
+
* For **form-level blocking errors** (e.g., submission failed), implement a separate
|
|
251
|
+
* error summary component with `role="alert"` and `aria-live="assertive"`.
|
|
252
|
+
*
|
|
175
253
|
* @see {@link FormErrorDisplayDirective} for custom wrapper implementation
|
|
176
254
|
*
|
|
177
|
-
* Blocking Errors
|
|
255
|
+
* Form-Level Blocking Errors:
|
|
178
256
|
* - For post-submit validation errors that block submission, implement a separate
|
|
179
257
|
* form-level error summary with role="alert" and aria-live="assertive"
|
|
180
|
-
* -
|
|
258
|
+
* - This component uses role="status" for field-level errors (non-disruptive)
|
|
259
|
+
* - Example for form-level errors:
|
|
181
260
|
* ```html
|
|
182
261
|
* <!-- Keep in DOM; update text content on submit -->
|
|
183
262
|
* <div id="form-errors" role="alert" aria-live="assertive" aria-atomic="true"></div>
|
|
184
263
|
* ```
|
|
185
|
-
* - This provides immediate
|
|
186
|
-
* inline field errors non-disruptive. Follows WCAG
|
|
264
|
+
* - This separation provides immediate announcements for blocking form errors while
|
|
265
|
+
* keeping inline field errors non-disruptive. Follows WCAG ARIA21/ARIA22 guidance.
|
|
187
266
|
*
|
|
188
267
|
* Error & Warning Display Behavior:
|
|
189
|
-
* - The error display mode can be configured globally using the
|
|
190
|
-
* - Possible values: 'on-blur' | 'on-submit' | 'on-blur-or-submit' (default: 'on-blur-or-submit')
|
|
268
|
+
* - The error display mode can be configured globally using the NGX_ERROR_DISPLAY_MODE_TOKEN injection token, or per instance using the `errorDisplayMode` input on FormErrorDisplayDirective (which this component uses as a hostDirective).
|
|
269
|
+
* - Possible error display values: 'on-blur' | 'on-submit' | 'on-blur-or-submit' | 'on-dirty' | 'always' (default: 'on-blur-or-submit')
|
|
270
|
+
* - The warning display mode can be configured globally using NGX_WARNING_DISPLAY_MODE_TOKEN, or per instance using the `warningDisplayMode` input on FormErrorDisplayDirective.
|
|
271
|
+
* - Possible warning display values: 'on-touch' | 'on-validated-or-touch' | 'on-dirty' | 'always' (default: 'on-validated-or-touch')
|
|
191
272
|
*
|
|
192
273
|
* Example (per instance):
|
|
193
274
|
* <div ngxControlWrapper>
|
|
@@ -208,10 +289,10 @@ declare class FormErrorDisplayDirective {
|
|
|
208
289
|
*
|
|
209
290
|
* Example (global config):
|
|
210
291
|
* import { provide } from '@angular/core';
|
|
211
|
-
* import {
|
|
292
|
+
* import { NGX_ERROR_DISPLAY_MODE_TOKEN } from 'ngx-vest-forms';
|
|
212
293
|
* @Component({
|
|
213
294
|
* providers: [
|
|
214
|
-
* provide(
|
|
295
|
+
* provide(NGX_ERROR_DISPLAY_MODE_TOKEN, { useValue: 'submit' })
|
|
215
296
|
* ]
|
|
216
297
|
* })
|
|
217
298
|
* export class MyComponent {}
|
|
@@ -256,6 +337,14 @@ declare class ControlWrapperComponent implements AfterContentInit, OnDestroy {
|
|
|
256
337
|
*/
|
|
257
338
|
private readonly pendingState;
|
|
258
339
|
protected readonly showPendingMessage: _angular_core.Signal<boolean>;
|
|
340
|
+
/**
|
|
341
|
+
* Whether to display warnings.
|
|
342
|
+
* Delegates to FormErrorDisplayDirective's centralized shouldShowWarnings signal.
|
|
343
|
+
*
|
|
344
|
+
* This ensures consistent warning display behavior across all form components
|
|
345
|
+
* and supports the new 'on-dirty' and 'always' display modes.
|
|
346
|
+
*/
|
|
347
|
+
protected readonly shouldShowWarnings: _angular_core.Signal<boolean>;
|
|
259
348
|
/**
|
|
260
349
|
* Computed signal that builds aria-describedby string based on visible regions
|
|
261
350
|
*/
|
|
@@ -278,7 +367,7 @@ declare class ControlWrapperComponent implements AfterContentInit, OnDestroy {
|
|
|
278
367
|
*/
|
|
279
368
|
private updateFormControls;
|
|
280
369
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ControlWrapperComponent, never>;
|
|
281
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ControlWrapperComponent, "ngx-control-wrapper, sc-control-wrapper, [scControlWrapper], [ngxControlWrapper], [ngx-control-wrapper], [sc-control-wrapper]", never, { "ariaAssociationMode": { "alias": "ariaAssociationMode"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, [{ directive: typeof FormErrorDisplayDirective; inputs: { "errorDisplayMode": "errorDisplayMode"; }; outputs: {}; }]>;
|
|
370
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ControlWrapperComponent, "ngx-control-wrapper, sc-control-wrapper, [scControlWrapper], [ngxControlWrapper], [ngx-control-wrapper], [sc-control-wrapper]", never, { "ariaAssociationMode": { "alias": "ariaAssociationMode"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, [{ directive: typeof FormErrorDisplayDirective; inputs: { "errorDisplayMode": "errorDisplayMode"; "warningDisplayMode": "warningDisplayMode"; }; outputs: {}; }]>;
|
|
282
371
|
}
|
|
283
372
|
|
|
284
373
|
/**
|
|
@@ -326,7 +415,6 @@ declare class FormGroupWrapperComponent {
|
|
|
326
415
|
declare class FormErrorControlDirective implements AfterContentInit, OnDestroy {
|
|
327
416
|
protected readonly errorDisplay: FormErrorDisplayDirective;
|
|
328
417
|
private readonly elementRef;
|
|
329
|
-
private readonly destroyRef;
|
|
330
418
|
/**
|
|
331
419
|
* Controls how this directive applies ARIA attributes to descendant controls.
|
|
332
420
|
*
|
|
@@ -890,6 +978,13 @@ declare class FormDirective<T extends Record<string, unknown>> {
|
|
|
890
978
|
private readonly destroyRef;
|
|
891
979
|
private readonly cdr;
|
|
892
980
|
private readonly configDebounceTime;
|
|
981
|
+
/**
|
|
982
|
+
* Public signal storing field warnings keyed by field path.
|
|
983
|
+
* This allows warnings to be stored and displayed without affecting field validity.
|
|
984
|
+
* Angular's control.errors !== null marks a field as invalid, so we store warnings
|
|
985
|
+
* separately when they exist without errors.
|
|
986
|
+
*/
|
|
987
|
+
readonly fieldWarnings: _angular_core.WritableSignal<Map<string, readonly string[]>>;
|
|
893
988
|
/**
|
|
894
989
|
* Computed signal for form state with validity and errors.
|
|
895
990
|
* Used by templates and tests as vestForm.formState().valid/errors
|
|
@@ -938,7 +1033,7 @@ declare class FormDirective<T extends Record<string, unknown>> {
|
|
|
938
1033
|
* that is not PENDING
|
|
939
1034
|
* We need this to assure that the form is in 'idle' state
|
|
940
1035
|
*/
|
|
941
|
-
readonly idle$: Observable<"
|
|
1036
|
+
readonly idle$: Observable<"VALID" | "INVALID" | "DISABLED">;
|
|
942
1037
|
/**
|
|
943
1038
|
* Triggered as soon as the form value changes
|
|
944
1039
|
* It also contains the disabled values (raw values)
|
|
@@ -950,6 +1045,9 @@ declare class FormDirective<T extends Record<string, unknown>> {
|
|
|
950
1045
|
* Emits an object with all the errors of the form
|
|
951
1046
|
* every time a form control or form groups changes its status to valid or invalid
|
|
952
1047
|
*
|
|
1048
|
+
* For submit events, waits for async validation (including ROOT_FORM) to complete
|
|
1049
|
+
* before emitting errors. This ensures ROOT_FORM errors are included in the output.
|
|
1050
|
+
*
|
|
953
1051
|
* Cleanup is handled automatically by the directive when it's destroyed.
|
|
954
1052
|
*/
|
|
955
1053
|
readonly errorsChange: _angular_core.OutputRef<Record<string, any>>;
|
|
@@ -2311,9 +2409,23 @@ declare function fastDeepEqual(obj1: unknown, obj2: unknown, maxDepth?: number):
|
|
|
2311
2409
|
declare const SC_ERROR_DISPLAY_MODE_TOKEN: InjectionToken<ScErrorDisplayMode>;
|
|
2312
2410
|
/**
|
|
2313
2411
|
* Injection token for configuring the default error display mode.
|
|
2314
|
-
* Values:
|
|
2412
|
+
* Values:
|
|
2413
|
+
* - 'on-blur': Show errors after field is touched/blurred
|
|
2414
|
+
* - 'on-submit': Show errors after form submission
|
|
2415
|
+
* - 'on-blur-or-submit': Show errors after blur or form submission (default)
|
|
2416
|
+
* - 'on-dirty': Show errors as soon as the field value changes
|
|
2417
|
+
* - 'always': Show errors immediately, even on pristine fields
|
|
2315
2418
|
*/
|
|
2316
2419
|
declare const NGX_ERROR_DISPLAY_MODE_TOKEN: InjectionToken<ScErrorDisplayMode>;
|
|
2420
|
+
/**
|
|
2421
|
+
* Injection token for configuring the default warning display mode.
|
|
2422
|
+
* Values:
|
|
2423
|
+
* - 'on-touch': Show warnings after field is touched/blurred
|
|
2424
|
+
* - 'on-validated-or-touch': Show warnings after validation runs or field is touched (default)
|
|
2425
|
+
* - 'on-dirty': Show warnings as soon as the field value changes
|
|
2426
|
+
* - 'always': Show warnings immediately, even on pristine fields
|
|
2427
|
+
*/
|
|
2428
|
+
declare const NGX_WARNING_DISPLAY_MODE_TOKEN: InjectionToken<NgxWarningDisplayMode>;
|
|
2317
2429
|
|
|
2318
2430
|
/**
|
|
2319
2431
|
* Injection token for configurable validation config debounce timing.
|
|
@@ -2361,5 +2473,5 @@ declare const NGX_ERROR_DISPLAY_MODE_TOKEN: InjectionToken<ScErrorDisplayMode>;
|
|
|
2361
2473
|
*/
|
|
2362
2474
|
declare const NGX_VALIDATION_CONFIG_DEBOUNCE_TOKEN: InjectionToken<number>;
|
|
2363
2475
|
|
|
2364
|
-
export { ControlWrapperComponent, FormControlStateDirective, FormDirective, FormErrorControlDirective, FormErrorDisplayDirective, FormGroupWrapperComponent, FormModelDirective, FormModelGroupDirective, NGX_ERROR_DISPLAY_MODE_TOKEN, NGX_VALIDATION_CONFIG_DEBOUNCE_TOKEN, NgxVestForms, ROOT_FORM, ROOT_FORM as ROOT_FORM_CONSTANT, SC_ERROR_DISPLAY_MODE_TOKEN, ValidateRootFormDirective, ValidationConfigBuilder, arrayToObject, clearFields, clearFieldsWhen, cloneDeep, createDebouncedPendingState, createEmptyFormState, createValidationConfig, deepArrayToObject, fastDeepEqual, getAllFormErrors, getFormControlField, getFormGroupField, keepFieldsWhen, mergeValuesAndRawValues, objectToArray, parseFieldPath, set, setValueAtPath, shallowEqual, stringifyFieldPath, validateShape, vestForms, vestFormsViewProviders };
|
|
2365
|
-
export type { DebouncedPendingStateOptions, DebouncedPendingStateResult, DeepPartial, DeepRequired, FieldPath, FieldPathValue, FormCompatibleDeepRequired, FormFieldName, LeafFieldPath, NgxDeepPartial, NgxDeepRequired, NgxFieldKey, NgxFormCompatibleDeepRequired, NgxFormState, NgxTypedVestSuite, NgxValidationConfig, NgxVestSuite, ScErrorDisplayMode, ValidateFieldPath, ValidationConfigMap, ValidationOptions };
|
|
2476
|
+
export { ControlWrapperComponent, FormControlStateDirective, FormDirective, FormErrorControlDirective, FormErrorDisplayDirective, FormGroupWrapperComponent, FormModelDirective, FormModelGroupDirective, NGX_ERROR_DISPLAY_MODE_TOKEN, NGX_VALIDATION_CONFIG_DEBOUNCE_TOKEN, NGX_WARNING_DISPLAY_MODE_TOKEN, NgxVestForms, ROOT_FORM, ROOT_FORM as ROOT_FORM_CONSTANT, SC_ERROR_DISPLAY_MODE_TOKEN, ValidateRootFormDirective, ValidationConfigBuilder, arrayToObject, clearFields, clearFieldsWhen, cloneDeep, createDebouncedPendingState, createEmptyFormState, createValidationConfig, deepArrayToObject, fastDeepEqual, getAllFormErrors, getFormControlField, getFormGroupField, keepFieldsWhen, mergeValuesAndRawValues, objectToArray, parseFieldPath, set, setValueAtPath, shallowEqual, stringifyFieldPath, validateShape, vestForms, vestFormsViewProviders };
|
|
2477
|
+
export type { DebouncedPendingStateOptions, DebouncedPendingStateResult, DeepPartial, DeepRequired, FieldPath, FieldPathValue, FormCompatibleDeepRequired, FormFieldName, LeafFieldPath, NgxDeepPartial, NgxDeepRequired, NgxFieldKey, NgxFormCompatibleDeepRequired, NgxFormState, NgxTypedVestSuite, NgxValidationConfig, NgxVestSuite, NgxWarningDisplayMode, ScErrorDisplayMode, ValidateFieldPath, ValidationConfigMap, ValidationOptions };
|