ngx-vest-forms 2.0.0-beta.6 → 2.0.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 +33 -1
- package/fesm2022/ngx-vest-forms.mjs +518 -279
- package/fesm2022/ngx-vest-forms.mjs.map +1 -1
- package/package.json +2 -2
- package/types/ngx-vest-forms.d.ts +146 -23
package/README.md
CHANGED
|
@@ -118,7 +118,10 @@ That's all you need. The directive automatically creates controls, wires validat
|
|
|
118
118
|
- **Vest.js validations** — Sync/async, conditional, composable patterns with `only(field)` optimization
|
|
119
119
|
- **Error display modes** — Control when errors show: `on-blur`, `on-submit`, or `on-blur-or-submit` (default)
|
|
120
120
|
- **Form state tracking** — Access touched, dirty, valid/invalid states for individual fields or entire form
|
|
121
|
-
- **Error display helpers** — `ngx-control-wrapper` component (recommended)
|
|
121
|
+
- **Error display helpers** — `ngx-control-wrapper` component (recommended) plus directive building blocks for custom wrappers:
|
|
122
|
+
- `ngx-form-group-wrapper` component (recommended for `ngModelGroup` containers)
|
|
123
|
+
- `FormErrorDisplayDirective` (state + display policy)
|
|
124
|
+
- `FormErrorControlDirective` (adds ARIA wiring + stable region IDs)
|
|
122
125
|
- **Cross-field dependencies** — `validationConfig` for field-to-field triggers, `ROOT_FORM` for form-level rules
|
|
123
126
|
- **Utilities** — Field paths, field clearing, validation config builder
|
|
124
127
|
|
|
@@ -138,8 +141,37 @@ providers: [
|
|
|
138
141
|
<ngx-control-wrapper [errorDisplayMode]="'on-blur'">
|
|
139
142
|
<input name="email" [ngModel]="formValue().email" />
|
|
140
143
|
</ngx-control-wrapper>
|
|
144
|
+
|
|
145
|
+
// Group-safe mode (use this on an ngModelGroup container)
|
|
146
|
+
<ngx-form-group-wrapper ngModelGroup="address">
|
|
147
|
+
<ngx-control-wrapper>
|
|
148
|
+
<label for="street">Street</label>
|
|
149
|
+
<input id="street" name="street" [ngModel]="formValue().address?.street" />
|
|
150
|
+
</ngx-control-wrapper>
|
|
151
|
+
|
|
152
|
+
<ngx-control-wrapper>
|
|
153
|
+
<label for="city">City</label>
|
|
154
|
+
<input id="city" name="city" [ngModel]="formValue().address?.city" />
|
|
155
|
+
</ngx-control-wrapper>
|
|
156
|
+
</ngx-form-group-wrapper>
|
|
141
157
|
```
|
|
142
158
|
|
|
159
|
+
#### ARIA association (advanced)
|
|
160
|
+
|
|
161
|
+
`<ngx-control-wrapper>` can optionally apply `aria-describedby` / `aria-invalid` to **descendant** controls.
|
|
162
|
+
This is controlled by `ariaAssociationMode`:
|
|
163
|
+
|
|
164
|
+
- `"all-controls"` (default) — stamps all descendant `input/select/textarea`
|
|
165
|
+
- `"single-control"` — stamps only if exactly one control exists (useful for input + extra buttons)
|
|
166
|
+
- `"none"` — never mutates descendant controls (group-safe / manual wiring)
|
|
167
|
+
|
|
168
|
+
For `ngModelGroup` containers, prefer using `<ngx-form-group-wrapper>` (group-safe by default).
|
|
169
|
+
|
|
170
|
+
📖 See also:
|
|
171
|
+
|
|
172
|
+
- [Accessibility Guide](./docs/ACCESSIBILITY.md)
|
|
173
|
+
- [`ControlWrapperComponent` docs](./projects/ngx-vest-forms/src/lib/components/control-wrapper/README.md)
|
|
174
|
+
|
|
143
175
|
**Available modes:**
|
|
144
176
|
|
|
145
177
|
- **`on-blur-or-submit`** (default) — Show errors after field is touched OR form is submitted
|