@ng-simplicity/forms-core 1.1.1 → 1.1.2
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 +5 -1
- package/fesm2022/ng-simplicity-forms-core.mjs +263 -10
- package/fesm2022/ng-simplicity-forms-core.mjs.map +1 -1
- package/index.d.ts +483 -3
- package/package.json +7 -5
package/index.d.ts
CHANGED
|
@@ -2,20 +2,28 @@ import * as rxjs from 'rxjs';
|
|
|
2
2
|
import { Subject, Subscription, Observable, BehaviorSubject } from 'rxjs';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
4
|
import { OnInit, OnDestroy, Signal, Type, InjectionToken, Injector, ViewContainerRef, ChangeDetectorRef } from '@angular/core';
|
|
5
|
-
import * as
|
|
5
|
+
import * as _angular_forms from '@angular/forms';
|
|
6
6
|
import { ValidatorFn, UntypedFormControl, FormGroup, AbstractControl, UntypedFormGroup, UntypedFormArray, FormArray } from '@angular/forms';
|
|
7
7
|
import * as _ng_simplicity_forms_core from '@ng-simplicity/forms-core';
|
|
8
8
|
import * as i1 from '@angular/common';
|
|
9
9
|
|
|
10
|
+
/** Base class that ties RxJS subscriptions to the component's lifetime. */
|
|
10
11
|
declare abstract class NgsSubscriber {
|
|
11
12
|
protected readonly destroy$: Subject<void>;
|
|
12
13
|
protected subscriptions: Subscription[];
|
|
14
|
+
/** Subscribes to `subscribeTo` until the component is destroyed. */
|
|
13
15
|
subscribe<T>(subscribeTo: Observable<T>, nextObserver: (value: T) => void): void;
|
|
14
16
|
ngOnDestroy(): void;
|
|
15
17
|
static ɵfac: i0.ɵɵFactoryDeclaration<NgsSubscriber, never>;
|
|
16
18
|
static ɵdir: i0.ɵɵDirectiveDeclaration<NgsSubscriber, never, never, {}, {}, never, never, true, never>;
|
|
17
19
|
}
|
|
18
20
|
|
|
21
|
+
/**
|
|
22
|
+
* Shape for server side validation errors, nested to mirror the form structure.
|
|
23
|
+
*
|
|
24
|
+
* @notImplemented
|
|
25
|
+
* @remarks Reserved for future use: nothing in the library consumes it yet.
|
|
26
|
+
*/
|
|
19
27
|
interface NgsServerSideValidationErrorObjectType {
|
|
20
28
|
key: string;
|
|
21
29
|
path: string;
|
|
@@ -24,52 +32,165 @@ interface NgsServerSideValidationErrorObjectType {
|
|
|
24
32
|
children: NgsServerSideValidationErrorObjectType[];
|
|
25
33
|
}
|
|
26
34
|
|
|
35
|
+
/** Map of validator error keys to user facing messages. */
|
|
27
36
|
type NgsFormsFormErrorKeyValueMap = {
|
|
28
37
|
[key: string]: string;
|
|
29
38
|
};
|
|
30
39
|
|
|
40
|
+
/** One option of a radio group or select. */
|
|
31
41
|
interface NgsFormsFormInputOption {
|
|
42
|
+
/** Value written to the form control when the option is chosen. */
|
|
32
43
|
id: string;
|
|
44
|
+
/** Text shown to the user. */
|
|
33
45
|
label: string;
|
|
46
|
+
/** Renders the option but prevents choosing it. */
|
|
34
47
|
disabled?: boolean;
|
|
35
48
|
}
|
|
36
49
|
|
|
50
|
+
/** Base configuration shared by every form item (inputs, containers and content items). */
|
|
37
51
|
interface NgsFormsFormItemConfigBase {
|
|
52
|
+
/**
|
|
53
|
+
* Stable identifier for the item. Generated with `uuid` by the `create()` factories when omitted.
|
|
54
|
+
* Component state set with `NgsFormsService.updateComponentState()` can be keyed by this value.
|
|
55
|
+
*/
|
|
38
56
|
uuid?: string;
|
|
57
|
+
/**
|
|
58
|
+
* Static visibility flag.
|
|
59
|
+
*
|
|
60
|
+
* @notImplemented
|
|
61
|
+
* @remarks Reserved for future use: the renderer currently ignores it. Use `visible$` to show or hide an item.
|
|
62
|
+
*/
|
|
39
63
|
visible?: boolean;
|
|
64
|
+
/**
|
|
65
|
+
* Stream that controls whether the item is rendered.
|
|
66
|
+
*
|
|
67
|
+
* @remarks When the stream emits `false` the item's component is destroyed and its control is removed from the
|
|
68
|
+
* parent form group, so hidden fields are excluded from the form value and from validation. When it emits `true`
|
|
69
|
+
* the component is created again with a fresh control. Items without `visible$` are always rendered.
|
|
70
|
+
* @example
|
|
71
|
+
* ```ts
|
|
72
|
+
* visible$: this.forms.formValue$.pipe(map((v) => v?.profile?.contactMethod === 'email'))
|
|
73
|
+
* ```
|
|
74
|
+
*/
|
|
40
75
|
visible$?: Observable<boolean>;
|
|
76
|
+
/**
|
|
77
|
+
* Initial component state for this item.
|
|
78
|
+
*
|
|
79
|
+
* @notImplemented
|
|
80
|
+
* @remarks Reserved for future use.
|
|
81
|
+
*/
|
|
41
82
|
initialState?: any;
|
|
42
83
|
}
|
|
84
|
+
/**
|
|
85
|
+
* Configuration for items that render a list of child items without creating a form control of their own
|
|
86
|
+
* (for example sections and columns).
|
|
87
|
+
*/
|
|
43
88
|
interface NgsFormsFormItemContainerConfigBase extends NgsFormsFormItemConfigBase {
|
|
89
|
+
/** The child items to render, in order. */
|
|
44
90
|
items: Array<NgsFormsFormItem<any>>;
|
|
45
91
|
}
|
|
92
|
+
/**
|
|
93
|
+
* Configuration for `NgsFormsFormGroupComponent`: a named group of child items backed by an `UntypedFormGroup`.
|
|
94
|
+
*/
|
|
46
95
|
interface NgsFormsFormGroupConfig extends NgsFormsFormItemConfigBaseItemWithNameAndValidators, NgsFormsFormItemContainerConfigBase {
|
|
47
96
|
}
|
|
97
|
+
/** Base configuration for items that own a form control (inputs, groups and arrays). */
|
|
48
98
|
interface NgsFormsFormItemConfigBaseItemWithNameAndValidators extends NgsFormsFormItemConfigBase {
|
|
99
|
+
/**
|
|
100
|
+
* Control name inside the parent form group. Becomes the key of this item's value in `NgsFormsService.formValue$`.
|
|
101
|
+
*/
|
|
49
102
|
name: string;
|
|
103
|
+
/**
|
|
104
|
+
* Maps validator error keys (for example `required`, `minlength`, `email`) to the message shown to the user.
|
|
105
|
+
*
|
|
106
|
+
* @remarks Only the first error on the control is displayed. Errors without an entry fall back to
|
|
107
|
+
* `Field is invalid: <errorKey>`. Messages appear once the control is touched or dirty, or after
|
|
108
|
+
* `NgsFormsService.setIsSubmitted(true)`.
|
|
109
|
+
*/
|
|
50
110
|
errorMessageMap?: NgsFormsFormErrorKeyValueMap;
|
|
111
|
+
/**
|
|
112
|
+
* Static disabled flag.
|
|
113
|
+
*
|
|
114
|
+
* @notImplemented
|
|
115
|
+
* @remarks Reserved for future use: the built-in components do not read it yet.
|
|
116
|
+
*/
|
|
51
117
|
disabled?: boolean;
|
|
118
|
+
/**
|
|
119
|
+
* Stream that controls the disabled state.
|
|
120
|
+
*
|
|
121
|
+
* @notImplemented
|
|
122
|
+
* @remarks Reserved for future use: the built-in components do not read it yet.
|
|
123
|
+
*/
|
|
52
124
|
disabled$?: Observable<boolean>;
|
|
125
|
+
/**
|
|
126
|
+
* Angular validators applied to the item's control. Takes precedence over `validators$` when both are set.
|
|
127
|
+
*/
|
|
53
128
|
validators?: Array<ValidatorFn>;
|
|
129
|
+
/**
|
|
130
|
+
* Stream of validator arrays. Each emission replaces the control's validators, which lets rules depend on other
|
|
131
|
+
* values in the form. Ignored when `validators` is also set.
|
|
132
|
+
*
|
|
133
|
+
* @remarks The control's validity is recalculated on its next value change, so call `updateValueAndValidity()`
|
|
134
|
+
* yourself if you need the new rules to apply immediately.
|
|
135
|
+
*/
|
|
54
136
|
validators$?: Observable<Array<ValidatorFn>>;
|
|
55
137
|
}
|
|
138
|
+
/** Base configuration for a labelled input control. */
|
|
56
139
|
interface NgsFormsFormItemConfigBaseInput extends NgsFormsFormItemConfigBaseItemWithNameAndValidators {
|
|
140
|
+
/**
|
|
141
|
+
* Optional element id.
|
|
142
|
+
*
|
|
143
|
+
* @notImplemented
|
|
144
|
+
* @remarks Reserved for future use: the built-in components generate their own ids.
|
|
145
|
+
*/
|
|
57
146
|
id?: string;
|
|
147
|
+
/** Label text shown next to or above the control. */
|
|
58
148
|
label: string;
|
|
149
|
+
/**
|
|
150
|
+
* Initial value.
|
|
151
|
+
*
|
|
152
|
+
* @notImplemented
|
|
153
|
+
* @remarks Reserved for future use. Set initial values with `NgsFormsService.patchValue()` after the form renders.
|
|
154
|
+
*/
|
|
59
155
|
value?: unknown;
|
|
60
156
|
}
|
|
157
|
+
/** Base configuration for single line text inputs. */
|
|
61
158
|
interface NgsFormsFormItemConfigBaseTextInput extends NgsFormsFormItemConfigBaseInput {
|
|
159
|
+
/** Placeholder text shown while the input is empty. */
|
|
62
160
|
placeholder?: string;
|
|
161
|
+
/**
|
|
162
|
+
* The HTML input type.
|
|
163
|
+
* @defaultValue 'text'
|
|
164
|
+
*/
|
|
63
165
|
type?: 'text' | 'email' | 'password';
|
|
64
166
|
}
|
|
167
|
+
/**
|
|
168
|
+
* Base configuration for inputs that choose from a list of options (radio groups and selects).
|
|
169
|
+
*/
|
|
65
170
|
interface NgsFormsFormItemConfigBaseInputWithOptions extends NgsFormsFormItemConfigBaseInput {
|
|
171
|
+
/** Static list of options. Used as the initial value when `options$` is also set. */
|
|
66
172
|
options?: Array<NgsFormsFormInputOption>;
|
|
173
|
+
/**
|
|
174
|
+
* Stream of options. Each emission replaces the rendered options, which makes cascading selects and
|
|
175
|
+
* server-loaded option lists possible.
|
|
176
|
+
*/
|
|
67
177
|
options$?: Observable<Array<NgsFormsFormInputOption>>;
|
|
68
178
|
}
|
|
69
179
|
|
|
180
|
+
/**
|
|
181
|
+
* A node in the form tree: which registered component to render (`type`) and the configuration to give it.
|
|
182
|
+
*
|
|
183
|
+
* @remarks You rarely build these by hand. Every built-in component has a static `create(config)` factory that
|
|
184
|
+
* returns one with the right `type` and a generated `uuid`.
|
|
185
|
+
*/
|
|
70
186
|
interface NgsFormsFormItem<T extends NgsFormsFormItemConfigBase> {
|
|
187
|
+
/** Unique identifier of the node. */
|
|
71
188
|
uuid?: string;
|
|
189
|
+
/**
|
|
190
|
+
* Registry key of the component that renders this item, for example `input-text` or `form-group`.
|
|
191
|
+
*/
|
|
72
192
|
type: string;
|
|
193
|
+
/** The configuration handed to the component through the `NGS_FORMS_ITEM_DATA` token. */
|
|
73
194
|
config: T;
|
|
74
195
|
}
|
|
75
196
|
|
|
@@ -81,29 +202,77 @@ interface NgsFormsCommonComponentState {
|
|
|
81
202
|
interface NgsFormsGlobalFormState extends NgsFormsCommonComponentState {
|
|
82
203
|
}
|
|
83
204
|
|
|
205
|
+
/**
|
|
206
|
+
* The top level configuration passed to `NgsFormsService.setFormConfig()`.
|
|
207
|
+
*
|
|
208
|
+
* @example
|
|
209
|
+
* ```ts
|
|
210
|
+
* const config: NgsFormsFormConfig = {
|
|
211
|
+
* inputUpdateDebounce: 0,
|
|
212
|
+
* globalState: {},
|
|
213
|
+
* root: NgsFormsFormGroupComponent.create({ name: 'profile', items: [ ... ] }),
|
|
214
|
+
* };
|
|
215
|
+
* ```
|
|
216
|
+
*/
|
|
84
217
|
interface NgsFormsFormConfig<T = NgsFormsFormItem<any>> {
|
|
218
|
+
/**
|
|
219
|
+
* Debounce, in milliseconds, for input value updates.
|
|
220
|
+
*
|
|
221
|
+
* @notImplemented
|
|
222
|
+
* @remarks Reserved for future use: values currently update on every change.
|
|
223
|
+
*/
|
|
85
224
|
inputUpdateDebounce: number;
|
|
225
|
+
/** Initial state shared by every component in the form. */
|
|
86
226
|
globalState: NgsFormsGlobalFormState;
|
|
227
|
+
/**
|
|
228
|
+
* The root item, usually an `NgsFormsFormGroupComponent`, whose form group backs the whole form.
|
|
229
|
+
*/
|
|
87
230
|
root: T;
|
|
231
|
+
/**
|
|
232
|
+
* Initial form state.
|
|
233
|
+
*
|
|
234
|
+
* @notImplemented
|
|
235
|
+
* @remarks Reserved for future use.
|
|
236
|
+
*/
|
|
88
237
|
initialState?: any;
|
|
89
238
|
}
|
|
90
239
|
|
|
240
|
+
/**
|
|
241
|
+
* Root base class for every form item component. Reads the item's configuration from `NGS_FORMS_ITEM_DATA`.
|
|
242
|
+
*
|
|
243
|
+
* @remarks Extend it for components that do not own a form control, such as static content or buttons. Declare a
|
|
244
|
+
* `static key` and a `static create(config)` factory so the component can be registered and used in configs.
|
|
245
|
+
*/
|
|
91
246
|
declare abstract class NgsFormsBaseClassFormComponent<T extends NgsFormsFormItemConfigBase> extends NgsSubscriber {
|
|
247
|
+
/** Registry key the component is registered under. */
|
|
92
248
|
static key: string;
|
|
249
|
+
/** Unique id for this component instance, handy for `id` and `for` attributes. */
|
|
93
250
|
id: string;
|
|
251
|
+
/** The item's configuration. */
|
|
94
252
|
protected config: T;
|
|
253
|
+
/** The full form item: `uuid`, `type` and `config`. */
|
|
95
254
|
protected readonly itemData: NgsFormsFormItem<T>;
|
|
96
255
|
constructor();
|
|
97
256
|
static ɵfac: i0.ɵɵFactoryDeclaration<NgsFormsBaseClassFormComponent<any>, never>;
|
|
98
257
|
static ɵdir: i0.ɵɵDirectiveDeclaration<NgsFormsBaseClassFormComponent<any>, never, never, {}, {}, never, never, true, never>;
|
|
99
258
|
}
|
|
100
259
|
|
|
260
|
+
/**
|
|
261
|
+
* Base class for items that own a form control. Creates the control, applies `validators` / `validators$`,
|
|
262
|
+
* registers it with the parent group under `config.name` and keeps `errorMessage` up to date.
|
|
263
|
+
*/
|
|
101
264
|
declare class NgsFormsFormItemWithVisibleAndValidatorsBase<T extends NgsFormsFormItemConfigBaseItemWithNameAndValidators> extends NgsFormsBaseClassFormComponent<T> implements OnInit, OnDestroy {
|
|
265
|
+
/** The item's form control. Bind it with `[formControl]`. */
|
|
102
266
|
control: UntypedFormControl | undefined;
|
|
267
|
+
/**
|
|
268
|
+
* Message for the control's first error, taken from `errorMessageMap`. Empty while the control is valid, or
|
|
269
|
+
* before it is touched, dirty or submitted.
|
|
270
|
+
*/
|
|
103
271
|
errorMessage: string;
|
|
104
272
|
private formAddRemoveFns;
|
|
105
273
|
private privateService;
|
|
106
274
|
private changeDetectorRef;
|
|
275
|
+
/** Whether the form has been marked as submitted with `NgsFormsService.setIsSubmitted()`. */
|
|
107
276
|
readonly submitted: Signal<boolean>;
|
|
108
277
|
ngOnInit(): void;
|
|
109
278
|
private updateErrorMessage;
|
|
@@ -113,14 +282,37 @@ declare class NgsFormsFormItemWithVisibleAndValidatorsBase<T extends NgsFormsFor
|
|
|
113
282
|
static ɵdir: i0.ɵɵDirectiveDeclaration<NgsFormsFormItemWithVisibleAndValidatorsBase<any>, never, never, {}, {}, never, never, true, never>;
|
|
114
283
|
}
|
|
115
284
|
|
|
285
|
+
/**
|
|
286
|
+
* Maps registry keys (the `type` of an `NgsFormsFormItem`) to the Angular components that render them.
|
|
287
|
+
*
|
|
288
|
+
* @remarks The service is provided in the `platform` injector, so there is one registry per page. Registering a
|
|
289
|
+
* key again replaces the previous component, which is how a theme package or your own component can override a
|
|
290
|
+
* built-in one. Register components before the form renders, typically in the constructor of the component that
|
|
291
|
+
* hosts `<ngs-form>`.
|
|
292
|
+
* @example
|
|
293
|
+
* ```ts
|
|
294
|
+
* constructor(registry: NgsFormsComponentRegistryService) {
|
|
295
|
+
* NgsFormsBootstrapModule.registerAllBootStrapComponents(registry);
|
|
296
|
+
* registry.register(MyRatingComponent.key, MyRatingComponent);
|
|
297
|
+
* }
|
|
298
|
+
* ```
|
|
299
|
+
*/
|
|
116
300
|
declare class NgsFormsComponentRegistryService {
|
|
117
301
|
private readonly itemComponentRegistry;
|
|
302
|
+
/** Returns the component registered for `key`, or `undefined` when nothing is registered. */
|
|
118
303
|
getComponentTypeForKey(key: string): Type<unknown> | undefined;
|
|
304
|
+
/** Registers `component` under `key`, replacing any component already registered for it. */
|
|
119
305
|
register(key: string, component: Type<unknown>): void;
|
|
120
306
|
static ɵfac: i0.ɵɵFactoryDeclaration<NgsFormsComponentRegistryService, never>;
|
|
121
307
|
static ɵprov: i0.ɵɵInjectableDeclaration<NgsFormsComponentRegistryService>;
|
|
122
308
|
}
|
|
123
309
|
|
|
310
|
+
/**
|
|
311
|
+
* Per form state holder that connects `<ngs-form>`, its items and `NgsFormsService`.
|
|
312
|
+
*
|
|
313
|
+
* @remarks Provided by `NgsFormComponent`. Application code should use `NgsFormsService` instead; this service is
|
|
314
|
+
* exported for authors of custom components and may change between minor versions.
|
|
315
|
+
*/
|
|
124
316
|
declare class NgsFormsInternalService {
|
|
125
317
|
formGroup$: BehaviorSubject<FormGroup<any>>;
|
|
126
318
|
formConfig$: BehaviorSubject<NgsFormsFormConfig<NgsFormsFormItem<any>> | undefined>;
|
|
@@ -139,62 +331,155 @@ declare class NgsFormsInternalService {
|
|
|
139
331
|
static ɵprov: i0.ɵɵInjectableDeclaration<NgsFormsInternalService>;
|
|
140
332
|
}
|
|
141
333
|
|
|
334
|
+
/**
|
|
335
|
+
* The public API of a form. Provide it on the component that hosts `<ngs-form>` so each form gets its own instance.
|
|
336
|
+
*
|
|
337
|
+
* @example
|
|
338
|
+
* ```ts
|
|
339
|
+
* @Component({
|
|
340
|
+
* selector: 'app-profile',
|
|
341
|
+
* imports: [NgsFormComponent],
|
|
342
|
+
* providers: [NgsFormsService],
|
|
343
|
+
* template: `<ngs-form />`,
|
|
344
|
+
* })
|
|
345
|
+
* export class ProfileComponent {
|
|
346
|
+
* private readonly forms = inject(NgsFormsService);
|
|
347
|
+
* readonly value = toSignal(this.forms.formValue$);
|
|
348
|
+
* }
|
|
349
|
+
* ```
|
|
350
|
+
*/
|
|
142
351
|
declare class NgsFormsService implements OnDestroy {
|
|
352
|
+
/**
|
|
353
|
+
* @internal
|
|
354
|
+
*/
|
|
143
355
|
attempt: number;
|
|
356
|
+
/**
|
|
357
|
+
* Emits the root form group's value every time it changes. Combine with `toSignal()` to read it in a template.
|
|
358
|
+
*
|
|
359
|
+
* @remarks The value is keyed by the root group's `name`, for example `{ profile: { firstName: 'Ada' } }`.
|
|
360
|
+
*/
|
|
144
361
|
formValue$: BehaviorSubject<any>;
|
|
362
|
+
/** The latest value emitted by `formValue$`. */
|
|
145
363
|
formValue: any;
|
|
146
364
|
private internalFormService;
|
|
147
365
|
private formGroupSubscriptions;
|
|
148
366
|
private formGroup;
|
|
367
|
+
/** `true` once the user has changed any control in the form. */
|
|
149
368
|
get dirty(): boolean;
|
|
369
|
+
/** `true` when every rendered control passes its validators. Hidden items are not validated. */
|
|
150
370
|
get isValid(): boolean;
|
|
371
|
+
/** `true` once `<ngs-form>` has connected to this service. */
|
|
151
372
|
get internalServiceIsSet(): boolean;
|
|
373
|
+
/**
|
|
374
|
+
* Renders a form from `formConfig`, replacing any form that is already shown and resetting the submitted state.
|
|
375
|
+
*
|
|
376
|
+
* @remarks It is safe to call before `<ngs-form>` has initialised (for example in `ngOnInit`): the call is retried
|
|
377
|
+
* every 25 ms for about half a second until the form component is available.
|
|
378
|
+
*/
|
|
152
379
|
setFormConfig(formConfig: NgsFormsFormConfig): void;
|
|
380
|
+
/**
|
|
381
|
+
* @internal
|
|
382
|
+
*/
|
|
153
383
|
setInternalService(internalFormsService: NgsFormsInternalService): void;
|
|
384
|
+
/**
|
|
385
|
+
* Marks the form as submitted (or not). While submitted, every invalid control shows its error message even if
|
|
386
|
+
* the user never touched it.
|
|
387
|
+
*/
|
|
154
388
|
setIsSubmitted(isSubmitted: boolean): void;
|
|
155
389
|
private bindFormGroup;
|
|
390
|
+
/**
|
|
391
|
+
* Merges `state` into the state of one component, identified by its `uuid` or control `name`.
|
|
392
|
+
* Components read the merged result through `commonState`.
|
|
393
|
+
*/
|
|
156
394
|
updateComponentState(componentKey: string, state: any): void;
|
|
395
|
+
/** Merges `state` into the state shared by every component in the form. */
|
|
157
396
|
updateGlobalState(state: any): void;
|
|
158
397
|
ngOnDestroy(): void;
|
|
398
|
+
/**
|
|
399
|
+
* Patches values into the form, using the same shape as `formValue$` (including the root group name).
|
|
400
|
+
*
|
|
401
|
+
* @remarks Only controls that are currently rendered receive values. Patch again after a conditional item becomes
|
|
402
|
+
* visible, and make sure a form array has enough rows (see `initialItemCount`) before patching array values.
|
|
403
|
+
*/
|
|
159
404
|
patchValue(entityData: any): void;
|
|
160
405
|
static ɵfac: i0.ɵɵFactoryDeclaration<NgsFormsService, never>;
|
|
161
406
|
static ɵprov: i0.ɵɵInjectableDeclaration<NgsFormsService>;
|
|
162
407
|
}
|
|
163
408
|
|
|
409
|
+
/**
|
|
410
|
+
* Base class for input components. Adds access to the form's `NgsFormsService` and the merged component state.
|
|
411
|
+
*
|
|
412
|
+
* @remarks This is the class to extend when you build your own input. See the Custom components guide.
|
|
413
|
+
*/
|
|
164
414
|
declare abstract class NgsFormsBaseClassFormInputComponent<T extends NgsFormsFormItemConfigBaseInput> extends NgsFormsFormItemWithVisibleAndValidatorsBase<T> {
|
|
415
|
+
/** The `NgsFormsService` of the form this input belongs to. */
|
|
165
416
|
readonly myFormService: NgsFormsService;
|
|
166
417
|
private readonly internalService;
|
|
418
|
+
/** Merged state for this component: its own state, then state by name, then global state. */
|
|
167
419
|
readonly commonState: Signal<NgsFormsCommonComponentState>;
|
|
420
|
+
/**
|
|
421
|
+
* Switches between input and summary display.
|
|
422
|
+
*
|
|
423
|
+
* @notImplemented
|
|
424
|
+
*/
|
|
168
425
|
toggleDisplayMode(setTo: 'summary' | 'input'): void;
|
|
169
426
|
static ɵfac: i0.ɵɵFactoryDeclaration<NgsFormsBaseClassFormInputComponent<any>, never>;
|
|
170
427
|
static ɵdir: i0.ɵɵDirectiveDeclaration<NgsFormsBaseClassFormInputComponent<any>, never, never, {}, {}, never, never, true, never>;
|
|
171
428
|
}
|
|
172
429
|
|
|
430
|
+
/** Base class for container items that render `config.items` without owning a form control. */
|
|
173
431
|
declare class NgsFormsBaseClassItemsContainerBase<T extends NgsFormsFormItemContainerConfigBase> extends NgsFormsBaseClassFormComponent<T> implements OnDestroy {
|
|
174
432
|
static ɵfac: i0.ɵɵFactoryDeclaration<NgsFormsBaseClassItemsContainerBase<any>, never>;
|
|
175
433
|
static ɵdir: i0.ɵɵDirectiveDeclaration<NgsFormsBaseClassItemsContainerBase<any>, never, never, {}, {}, never, never, true, never>;
|
|
176
434
|
}
|
|
177
435
|
|
|
436
|
+
/**
|
|
437
|
+
* Base class for inputs with options. Exposes `options` as a signal that follows `options$` when given and falls
|
|
438
|
+
* back to the static `options`.
|
|
439
|
+
*/
|
|
178
440
|
declare class NgsFormsBaseClassFormItemInputWithOptionsComponent<T extends NgsFormsFormItemConfigBaseInputWithOptions> extends NgsFormsBaseClassFormInputComponent<T> {
|
|
441
|
+
/** The current options. */
|
|
179
442
|
options: Signal<Array<NgsFormsFormInputOption>>;
|
|
180
443
|
static ɵfac: i0.ɵɵFactoryDeclaration<NgsFormsBaseClassFormItemInputWithOptionsComponent<any>, never>;
|
|
181
444
|
static ɵdir: i0.ɵɵDirectiveDeclaration<NgsFormsBaseClassFormItemInputWithOptionsComponent<any>, never, never, {}, {}, never, never, true, never>;
|
|
182
445
|
}
|
|
183
446
|
|
|
447
|
+
/**
|
|
448
|
+
* Renders the form described by the `NgsFormsFormConfig` given to the nearest `NgsFormsService`.
|
|
449
|
+
*
|
|
450
|
+
* @remarks Place it in the template of the component that provides `NgsFormsService`. It takes no inputs.
|
|
451
|
+
* @example
|
|
452
|
+
* ```html
|
|
453
|
+
* <ngs-form></ngs-form>
|
|
454
|
+
* ```
|
|
455
|
+
*/
|
|
184
456
|
declare class NgsFormComponent {
|
|
185
457
|
private readonly ngsInternalFormsService;
|
|
186
458
|
readonly ngsFormsService: NgsFormsService;
|
|
187
|
-
readonly formGroup: i0.Signal<
|
|
459
|
+
readonly formGroup: i0.Signal<_angular_forms.FormGroup<any> | undefined>;
|
|
188
460
|
readonly formConfig: i0.Signal<_ng_simplicity_forms_core.NgsFormsFormConfig<_ng_simplicity_forms_core.NgsFormsFormItem<any>> | undefined>;
|
|
461
|
+
/** The root item to render with the form group it belongs to (empty until a config is set). */
|
|
462
|
+
readonly rendered: i0.Signal<{
|
|
463
|
+
group: _angular_forms.FormGroup<any>;
|
|
464
|
+
root: _ng_simplicity_forms_core.NgsFormsFormItem<any>;
|
|
465
|
+
}[]>;
|
|
189
466
|
constructor();
|
|
190
467
|
static ɵfac: i0.ɵɵFactoryDeclaration<NgsFormComponent, never>;
|
|
191
468
|
static ɵcmp: i0.ɵɵComponentDeclaration<NgsFormComponent, "ngs-form", never, {}, {}, never, never, true, never>;
|
|
192
469
|
}
|
|
193
470
|
|
|
471
|
+
/** Injection token for the `NgsFormsFormItem` a component is rendering. */
|
|
194
472
|
declare const NGS_FORMS_ITEM_DATA: InjectionToken<unknown>;
|
|
473
|
+
/**
|
|
474
|
+
* @internal
|
|
475
|
+
*/
|
|
195
476
|
declare const NGS_FORMS_CONTROL_ADD_REMOVE_FN: InjectionToken<unknown>;
|
|
477
|
+
/** Injection token for the row index when a component is rendered inside a form array list. */
|
|
196
478
|
declare const NGS_FORMS_ITEM_INDEX: InjectionToken<unknown>;
|
|
197
479
|
type FormControlAddRemoveFn = (control: AbstractControl, controlName: string) => void;
|
|
480
|
+
/**
|
|
481
|
+
* @internal
|
|
482
|
+
*/
|
|
198
483
|
interface INgsFormsFormControlAddRemove {
|
|
199
484
|
add: FormControlAddRemoveFn;
|
|
200
485
|
remove: FormControlAddRemoveFn;
|
|
@@ -203,6 +488,9 @@ interface IControlAddRemoveFunctionsBuilder {
|
|
|
203
488
|
formGroup: (formGroup: UntypedFormGroup) => INgsFormsFormControlAddRemove;
|
|
204
489
|
formArray: (formArray: UntypedFormArray) => INgsFormsFormControlAddRemove;
|
|
205
490
|
}
|
|
491
|
+
/**
|
|
492
|
+
* @internal
|
|
493
|
+
*/
|
|
206
494
|
declare const NgsFormsFormControlAddRemoveFunctions: IControlAddRemoveFunctionsBuilder;
|
|
207
495
|
|
|
208
496
|
/**
|
|
@@ -210,11 +498,34 @@ declare const NgsFormsFormControlAddRemoveFunctions: IControlAddRemoveFunctionsB
|
|
|
210
498
|
* Returns a new object with properties from source assigned to target
|
|
211
499
|
* if the properties are undefined or missing on target.
|
|
212
500
|
*/
|
|
501
|
+
/**
|
|
502
|
+
* Returns a copy of `target` with any `undefined` properties filled in from `source`. A dependency free
|
|
503
|
+
* alternative to lodash `defaults`, handy for applying default config values in custom components.
|
|
504
|
+
*/
|
|
213
505
|
declare function ngsDefaults<T extends object, U extends object>(target: T, source: U): T & U;
|
|
214
506
|
|
|
507
|
+
/**
|
|
508
|
+
* Function form of a visibility rule.
|
|
509
|
+
*
|
|
510
|
+
* @notImplemented
|
|
511
|
+
* @remarks Reserved for future use. Use `visible$` today.
|
|
512
|
+
*/
|
|
215
513
|
type NgsFormItemVisibilityFn = (params: NgsFormsFunctionParameters) => Observable<boolean> | boolean;
|
|
514
|
+
/**
|
|
515
|
+
* Function form of a validator rule.
|
|
516
|
+
*
|
|
517
|
+
* @notImplemented
|
|
518
|
+
* @remarks Reserved for future use. Use `validators$` today.
|
|
519
|
+
*/
|
|
216
520
|
type NgsFormValidatorArrayBuilderFn = (params: NgsFormsFunctionParameters) => Observable<Array<ValidatorFn>> | Array<ValidatorFn>;
|
|
521
|
+
/**
|
|
522
|
+
* Function form of a disable rule.
|
|
523
|
+
*
|
|
524
|
+
* @notImplemented
|
|
525
|
+
* @remarks Reserved for future use.
|
|
526
|
+
*/
|
|
217
527
|
type NgsFormDisableFn = (params: NgsFormsFunctionParameters) => Observable<boolean> | boolean;
|
|
528
|
+
/** Parameters passed to the function rule types. */
|
|
218
529
|
interface NgsFormsFunctionParameters {
|
|
219
530
|
injector: Injector;
|
|
220
531
|
formGroup: UntypedFormGroup;
|
|
@@ -238,10 +549,22 @@ declare class NgsFormItemController extends NgsSubscriber {
|
|
|
238
549
|
private detach;
|
|
239
550
|
}
|
|
240
551
|
|
|
552
|
+
/**
|
|
553
|
+
* Structural building block that looks up a form item's component in the registry and renders it.
|
|
554
|
+
*
|
|
555
|
+
* @remarks Use it inside custom container components to render child items:
|
|
556
|
+
* `<ng-container [ngs-form-item]="item" [ngs-form-group]="group"></ng-container>`.
|
|
557
|
+
*/
|
|
241
558
|
declare class NgsFormsFormItemDirective implements OnInit, OnDestroy {
|
|
559
|
+
/** The item to render. */
|
|
242
560
|
itemData: NgsFormsFormItem<any> | undefined;
|
|
561
|
+
/** Form group that the item's control is added to. */
|
|
243
562
|
formGroup?: UntypedFormGroup;
|
|
563
|
+
/** Form array that the item's control is added to. */
|
|
244
564
|
formArray?: UntypedFormArray;
|
|
565
|
+
/**
|
|
566
|
+
* Index of the item inside a form array row, provided to children as `NGS_FORMS_ITEM_INDEX`.
|
|
567
|
+
*/
|
|
245
568
|
index?: number;
|
|
246
569
|
controller: NgsFormItemController | undefined;
|
|
247
570
|
private readonly viewContainerRef;
|
|
@@ -254,31 +577,71 @@ declare class NgsFormsFormItemDirective implements OnInit, OnDestroy {
|
|
|
254
577
|
static ɵdir: i0.ɵɵDirectiveDeclaration<NgsFormsFormItemDirective, "[ngs-form-item]", never, { "itemData": { "alias": "ngs-form-item"; "required": false; }; "formGroup": { "alias": "ngs-form-group"; "required": false; }; "formArray": { "alias": "ngs-form-array"; "required": false; }; "index": { "alias": "ngs-form-index"; "required": false; }; }, {}, never, never, true, never>;
|
|
255
578
|
}
|
|
256
579
|
|
|
580
|
+
/**
|
|
581
|
+
* Renders its items one after another without any wrapper markup. Useful as a grouping node inside a row.
|
|
582
|
+
*
|
|
583
|
+
* @remarks Registry key: `column`. Does not create a form control.
|
|
584
|
+
*/
|
|
257
585
|
declare class NgsFormsColumnComponent extends NgsFormsBaseClassItemsContainerBase<NgsFormsFormItemContainerConfigBase> {
|
|
258
586
|
static key: string;
|
|
587
|
+
/** Creates a `column` item. */
|
|
259
588
|
static create(config: NgsFormsFormItemContainerConfigBase): NgsFormsFormItem<NgsFormsFormItemContainerConfigBase>;
|
|
260
589
|
static ɵfac: i0.ɵɵFactoryDeclaration<NgsFormsColumnComponent, never>;
|
|
261
590
|
static ɵcmp: i0.ɵɵComponentDeclaration<NgsFormsColumnComponent, "ngs-form-component-column", never, {}, {}, never, never, true, never>;
|
|
262
591
|
}
|
|
263
592
|
|
|
593
|
+
/** Configuration for `NgsFormsRowComponent`. */
|
|
264
594
|
interface NgsFormItemRowConfig extends NgsFormsFormItemConfigBase {
|
|
595
|
+
/** Class for the element that wraps the whole row. */
|
|
265
596
|
containerClass?: string;
|
|
597
|
+
/** Class for each item's wrapper, matched by index. */
|
|
266
598
|
columnClasses?: Array<string> | string;
|
|
599
|
+
/** Class applied to every item's wrapper. Takes precedence over `columnClasses`. */
|
|
267
600
|
columnClass?: string;
|
|
601
|
+
/** Items to lay out. */
|
|
268
602
|
items: Array<NgsFormsFormItem<any>>;
|
|
269
603
|
}
|
|
270
604
|
|
|
605
|
+
/**
|
|
606
|
+
* Lays out items side by side. Each item is wrapped in a div whose class comes from `columnClass` (same for every
|
|
607
|
+
* item) or `columnClasses` (one per item), so it works with any CSS grid system.
|
|
608
|
+
*
|
|
609
|
+
* @remarks Registry key: `form-row`. Does not create a form control.
|
|
610
|
+
* @example
|
|
611
|
+
* ```ts
|
|
612
|
+
* NgsFormsRowComponent.create({
|
|
613
|
+
* containerClass: 'row g-3',
|
|
614
|
+
* columnClasses: ['col-md-6', 'col-md-6'],
|
|
615
|
+
* items: [firstName, lastName],
|
|
616
|
+
* })
|
|
617
|
+
* ```
|
|
618
|
+
*/
|
|
271
619
|
declare class NgsFormsRowComponent extends NgsFormsBaseClassFormComponent<NgsFormItemRowConfig> {
|
|
272
620
|
static key: string;
|
|
273
621
|
constructor();
|
|
274
622
|
getIndividualRowDivClass(index: number): string;
|
|
623
|
+
/** Creates a `form-row` item. */
|
|
275
624
|
static create(config: NgsFormItemRowConfig): NgsFormsFormItem<NgsFormItemRowConfig>;
|
|
276
625
|
static ɵfac: i0.ɵɵFactoryDeclaration<NgsFormsRowComponent, never>;
|
|
277
626
|
static ɵcmp: i0.ɵɵComponentDeclaration<NgsFormsRowComponent, "ngs-forms-row-component", never, {}, {}, never, never, true, never>;
|
|
278
627
|
}
|
|
279
628
|
|
|
629
|
+
/**
|
|
630
|
+
* A named group of items backed by an `UntypedFormGroup`. Its value is nested under `name` in the form value.
|
|
631
|
+
*
|
|
632
|
+
* @remarks Registry key: `form-group`. Usually the `root` of a form, and also useful for nesting related fields
|
|
633
|
+
* (an address, for example) or for hiding a whole group with `visible$`.
|
|
634
|
+
* @example
|
|
635
|
+
* ```ts
|
|
636
|
+
* NgsFormsFormGroupComponent.create({
|
|
637
|
+
* name: 'address',
|
|
638
|
+
* items: [addressLine1, city, postcode],
|
|
639
|
+
* })
|
|
640
|
+
* ```
|
|
641
|
+
*/
|
|
280
642
|
declare class NgsFormsFormGroupComponent extends NgsFormsFormItemWithVisibleAndValidatorsBase<NgsFormsFormGroupConfig> implements OnInit {
|
|
281
643
|
static key: string;
|
|
644
|
+
/** Creates a `form-group` item. */
|
|
282
645
|
static create(config: NgsFormsFormGroupConfig): NgsFormsFormItem<NgsFormsFormGroupConfig>;
|
|
283
646
|
get formGroupControl(): UntypedFormGroup;
|
|
284
647
|
constructor();
|
|
@@ -286,83 +649,166 @@ declare class NgsFormsFormGroupComponent extends NgsFormsFormItemWithVisibleAndV
|
|
|
286
649
|
static ɵcmp: i0.ɵɵComponentDeclaration<NgsFormsFormGroupComponent, "ngs-forms-form-group", never, {}, {}, never, never, true, never>;
|
|
287
650
|
}
|
|
288
651
|
|
|
652
|
+
/** Configuration for `NgsFormsFormArrayAddItemComponent`. */
|
|
289
653
|
interface NgsFormItemArrayAddItemConfig extends NgsFormsFormItemConfigBase {
|
|
654
|
+
/**
|
|
655
|
+
* Button label.
|
|
656
|
+
* @defaultValue 'Add Item'
|
|
657
|
+
*/
|
|
290
658
|
buttonText?: string;
|
|
659
|
+
/**
|
|
660
|
+
* Button class.
|
|
661
|
+
* @defaultValue 'btn btn-outline-primary'
|
|
662
|
+
*/
|
|
291
663
|
buttonClass?: string;
|
|
664
|
+
/** Class of an `<i>` icon shown before the label, for example `bi bi-plus`. */
|
|
292
665
|
buttonIcon?: string;
|
|
666
|
+
/**
|
|
667
|
+
* Callback after a row is added.
|
|
668
|
+
*
|
|
669
|
+
* @notImplemented
|
|
670
|
+
* @remarks Reserved for future use.
|
|
671
|
+
*/
|
|
293
672
|
onAddItem?: () => void;
|
|
294
673
|
}
|
|
295
674
|
|
|
675
|
+
/** Configuration for `NgsFormsFormArrayContainerComponent`. */
|
|
296
676
|
interface NgsFormItemArrayConfig extends NgsFormsFormItemConfigBaseItemWithNameAndValidators {
|
|
677
|
+
/** Number of rows created when the array first renders. */
|
|
297
678
|
initialItemCount?: number;
|
|
679
|
+
/** Remove buttons do nothing while the array has this many rows or fewer. */
|
|
298
680
|
minItems?: number;
|
|
681
|
+
/** Add buttons do nothing once the array has this many rows. */
|
|
299
682
|
maxItems?: number;
|
|
683
|
+
/** Class for the element that wraps the array's items. */
|
|
300
684
|
containerClass?: string;
|
|
685
|
+
/**
|
|
686
|
+
* Class for each row.
|
|
687
|
+
*
|
|
688
|
+
* @notImplemented
|
|
689
|
+
* @remarks Reserved for future use. Set `containerClass` on `NgsFormsFormArrayListComponent` to style rows.
|
|
690
|
+
*/
|
|
301
691
|
itemContainerClass?: string;
|
|
692
|
+
/** Items rendered inside the array: typically a list plus an add button. */
|
|
302
693
|
items: Array<NgsFormsFormItem<any>>;
|
|
303
694
|
}
|
|
304
695
|
|
|
696
|
+
/**
|
|
697
|
+
* A repeatable list of rows backed by an `UntypedFormArray`. Its value is an array under `name`.
|
|
698
|
+
*
|
|
699
|
+
* @remarks Registry key: `form-array`. Put an `NgsFormsFormArrayListComponent` inside `items` to render the rows,
|
|
700
|
+
* and `NgsFormsFormArrayAddItemComponent` / `NgsFormsFormArrayRemoveItemComponent` to let users change them.
|
|
701
|
+
*/
|
|
305
702
|
declare class NgsFormsFormArrayContainerComponent extends NgsFormsFormItemWithVisibleAndValidatorsBase<NgsFormItemArrayConfig> {
|
|
306
703
|
private formArrayService;
|
|
307
704
|
static key: string;
|
|
308
705
|
constructor(formArrayService: NgsFormsFormArrayInternalService);
|
|
706
|
+
/** Creates a `form-array` item. */
|
|
309
707
|
static create(config: NgsFormItemArrayConfig): NgsFormsFormItem<NgsFormItemArrayConfig>;
|
|
310
708
|
static ɵfac: i0.ɵɵFactoryDeclaration<NgsFormsFormArrayContainerComponent, never>;
|
|
311
709
|
static ɵcmp: i0.ɵɵComponentDeclaration<NgsFormsFormArrayContainerComponent, "ngs-forms-form-array", never, {}, {}, never, never, true, never>;
|
|
312
710
|
}
|
|
313
711
|
|
|
712
|
+
/**
|
|
713
|
+
* Holds the `UntypedFormArray` of one `NgsFormsFormArrayContainerComponent` and is shared with its list and buttons.
|
|
714
|
+
*
|
|
715
|
+
* @remarks Inject it in a custom component placed inside a form array to add or remove rows programmatically.
|
|
716
|
+
*/
|
|
314
717
|
declare class NgsFormsFormArrayInternalService implements OnDestroy {
|
|
315
718
|
config: NgsFormItemArrayConfig;
|
|
316
719
|
readonly formArray: UntypedFormArray;
|
|
720
|
+
/** Emits after a row is added or removed. */
|
|
317
721
|
readonly itemsChanged: Subject<void>;
|
|
318
722
|
constructor();
|
|
319
723
|
ngOnDestroy(): void;
|
|
724
|
+
/** Removes the row at `index`, unless that would go below `minItems`. */
|
|
320
725
|
removeAt(index: number): void;
|
|
726
|
+
/** Appends an empty row, unless the array already has `maxItems` rows. */
|
|
321
727
|
addItem(): void;
|
|
322
728
|
static ɵfac: i0.ɵɵFactoryDeclaration<NgsFormsFormArrayInternalService, never>;
|
|
323
729
|
static ɵprov: i0.ɵɵInjectableDeclaration<NgsFormsFormArrayInternalService>;
|
|
324
730
|
}
|
|
325
731
|
|
|
732
|
+
/**
|
|
733
|
+
* A button that appends a row to the enclosing form array, up to `maxItems`.
|
|
734
|
+
*
|
|
735
|
+
* @remarks Registry key: `form-array-add-item`. Must be placed inside an `NgsFormsFormArrayContainerComponent`.
|
|
736
|
+
*/
|
|
326
737
|
declare class NgsFormsFormArrayAddItemComponent extends NgsFormsBaseClassFormComponent<NgsFormItemArrayAddItemConfig> {
|
|
327
738
|
static key: string;
|
|
328
739
|
internalArrayService: NgsFormsFormArrayInternalService;
|
|
740
|
+
/** Creates a `form-array-add-item` item. */
|
|
329
741
|
static create(config: NgsFormItemArrayAddItemConfig): NgsFormsFormItem<NgsFormItemArrayAddItemConfig>;
|
|
330
742
|
addItem(): void;
|
|
331
743
|
static ɵfac: i0.ɵɵFactoryDeclaration<NgsFormsFormArrayAddItemComponent, never>;
|
|
332
744
|
static ɵcmp: i0.ɵɵComponentDeclaration<NgsFormsFormArrayAddItemComponent, "ngs-forms-form-array-add-item", never, {}, {}, never, never, true, never>;
|
|
333
745
|
}
|
|
334
746
|
|
|
747
|
+
/** Configuration for `NgsFormsFormArrayListComponent`. */
|
|
335
748
|
interface NgsFormsFormArrayListConfig extends NgsFormsFormItemConfigBase {
|
|
749
|
+
/** The item rendered for each row, usually a row or column of inputs. */
|
|
336
750
|
templateItem: NgsFormsFormItem<any>;
|
|
751
|
+
/** Class for the element that wraps each row. */
|
|
337
752
|
containerClass?: string;
|
|
338
753
|
}
|
|
339
754
|
|
|
755
|
+
/**
|
|
756
|
+
* Renders one copy of `templateItem` for every row of the enclosing form array. Each row gets its own form group,
|
|
757
|
+
* so the controls in the template become the properties of each array entry.
|
|
758
|
+
*
|
|
759
|
+
* @remarks Registry key: `form-array-list`. Must be placed inside an `NgsFormsFormArrayContainerComponent`.
|
|
760
|
+
*/
|
|
340
761
|
declare class NgsFormsFormArrayListComponent extends NgsFormsBaseClassFormComponent<NgsFormsFormArrayListConfig> implements OnInit {
|
|
341
762
|
static key: string;
|
|
342
763
|
internalArrayService: NgsFormsFormArrayInternalService;
|
|
343
764
|
myFormArray: FormArray<any>;
|
|
344
765
|
private changeDetectorRef;
|
|
345
766
|
ngOnInit(): void;
|
|
767
|
+
/** Creates a `form-array-list` item. */
|
|
346
768
|
static create(config: NgsFormsFormArrayListConfig): NgsFormsFormItem<NgsFormsFormArrayListConfig>;
|
|
347
769
|
castToFormGroup(control: AbstractControl): UntypedFormGroup;
|
|
348
770
|
static ɵfac: i0.ɵɵFactoryDeclaration<NgsFormsFormArrayListComponent, never>;
|
|
349
771
|
static ɵcmp: i0.ɵɵComponentDeclaration<NgsFormsFormArrayListComponent, "ngs-forms-form-array-list", never, {}, {}, never, never, true, never>;
|
|
350
772
|
}
|
|
351
773
|
|
|
774
|
+
/** Configuration for `NgsFormsFormArrayRemoveItemComponent`. */
|
|
352
775
|
interface NgsFormItemArrayRemoveItemConfig extends NgsFormsFormItemConfigBase {
|
|
776
|
+
/**
|
|
777
|
+
* Button label.
|
|
778
|
+
* @defaultValue 'Remove'
|
|
779
|
+
*/
|
|
353
780
|
buttonText?: string;
|
|
781
|
+
/**
|
|
782
|
+
* Button class.
|
|
783
|
+
* @defaultValue 'btn btn-outline-danger btn-sm'
|
|
784
|
+
*/
|
|
354
785
|
buttonClass?: string;
|
|
786
|
+
/** Class of an `<i>` icon shown before the label, for example `bi bi-trash`. */
|
|
355
787
|
buttonIcon?: string;
|
|
788
|
+
/**
|
|
789
|
+
* Callback after a row is removed.
|
|
790
|
+
*
|
|
791
|
+
* @notImplemented
|
|
792
|
+
* @remarks Reserved for future use.
|
|
793
|
+
*/
|
|
356
794
|
onRemoveItem?: () => void;
|
|
357
795
|
}
|
|
358
796
|
|
|
797
|
+
/**
|
|
798
|
+
* A button that removes its own row from the enclosing form array, down to `minItems`.
|
|
799
|
+
*
|
|
800
|
+
* @remarks Registry key: `form-array-remove-item`. Place it inside the `templateItem` of an
|
|
801
|
+
* `NgsFormsFormArrayListComponent` so each row gets one.
|
|
802
|
+
*/
|
|
359
803
|
declare class NgsFormsFormArrayRemoveItemComponent extends NgsFormsBaseClassFormComponent<NgsFormItemArrayRemoveItemConfig> {
|
|
360
804
|
static key: string;
|
|
361
805
|
internalArrayService: NgsFormsFormArrayInternalService;
|
|
362
806
|
private elementRef;
|
|
363
807
|
private indexFromDi;
|
|
808
|
+
/** Index of the row this button belongs to. */
|
|
364
809
|
get myIndex(): number;
|
|
365
810
|
constructor();
|
|
811
|
+
/** Creates a `form-array-remove-item` item. */
|
|
366
812
|
static create(config: NgsFormItemArrayRemoveItemConfig): NgsFormsFormItem<NgsFormItemArrayRemoveItemConfig>;
|
|
367
813
|
removeItem(): void;
|
|
368
814
|
static ɵfac: i0.ɵɵFactoryDeclaration<NgsFormsFormArrayRemoveItemComponent, never>;
|
|
@@ -374,24 +820,43 @@ interface NgsFormsTextDivConfig extends NgsFormsFormItemConfigBase {
|
|
|
374
820
|
classes?: string;
|
|
375
821
|
}
|
|
376
822
|
|
|
823
|
+
/**
|
|
824
|
+
* Renders a line of static text, such as a heading or a hint, inside the form.
|
|
825
|
+
*
|
|
826
|
+
* @remarks Registry key: `text-div`. Config: `text` and optional `classes`.
|
|
827
|
+
*/
|
|
377
828
|
declare class NgsFormsTextDivComponent extends NgsFormsBaseClassFormComponent<NgsFormsTextDivConfig> {
|
|
378
829
|
static key: string;
|
|
830
|
+
/** Creates a `text-div` item. */
|
|
379
831
|
static create(config: NgsFormsTextDivConfig): NgsFormsFormItem<NgsFormsTextDivConfig>;
|
|
832
|
+
/**
|
|
833
|
+
* Shortcut for a heading: creates a `text-div` with `text` and the given class (default `h2`).
|
|
834
|
+
*/
|
|
380
835
|
static title(title: string, divClass?: string): NgsFormsFormItem<NgsFormsTextDivConfig>;
|
|
381
836
|
static ɵfac: i0.ɵɵFactoryDeclaration<NgsFormsTextDivComponent, never>;
|
|
382
837
|
static ɵcmp: i0.ɵɵComponentDeclaration<NgsFormsTextDivComponent, "ngs-form-component-text-div", never, {}, {}, never, never, true, never>;
|
|
383
838
|
}
|
|
384
839
|
|
|
840
|
+
/** Configuration for `NgsFormsHtmlContentComponent`. */
|
|
385
841
|
interface NgsFormItemHtmlContentConfig extends NgsFormsFormItemConfigBase {
|
|
842
|
+
/** The HTML to render. */
|
|
386
843
|
html: string;
|
|
844
|
+
/** Reserved. The HTML is always sanitized. */
|
|
387
845
|
sanitize: boolean;
|
|
388
846
|
}
|
|
389
847
|
|
|
848
|
+
/**
|
|
849
|
+
* Renders an HTML string inside the form. The HTML is passed through Angular's sanitizer.
|
|
850
|
+
*
|
|
851
|
+
* @remarks Registry key: `content-html`. Registered by `registerCoreNgsFormComponents()`, which the theme packages'
|
|
852
|
+
* `registerAll…` helpers call for you.
|
|
853
|
+
*/
|
|
390
854
|
declare class NgsFormsHtmlContentComponent extends NgsFormsBaseClassFormComponent<NgsFormItemHtmlContentConfig> {
|
|
391
855
|
static key: string;
|
|
392
856
|
contentConfig: NgsFormItemHtmlContentConfig;
|
|
393
857
|
html: string;
|
|
394
858
|
constructor();
|
|
859
|
+
/** Creates a `content-html` item. */
|
|
395
860
|
static create(config: NgsFormItemHtmlContentConfig): NgsFormsFormItem<NgsFormItemHtmlContentConfig>;
|
|
396
861
|
static ɵfac: i0.ɵɵFactoryDeclaration<NgsFormsHtmlContentComponent, never>;
|
|
397
862
|
static ɵcmp: i0.ɵɵComponentDeclaration<NgsFormsHtmlContentComponent, "ngs-form-component-html-content", never, {}, {}, never, never, true, never>;
|
|
@@ -404,18 +869,33 @@ interface NgsFormsFormSectionConfig extends NgsFormsFormItemContainerConfigBase
|
|
|
404
869
|
subtitleClass?: string;
|
|
405
870
|
}
|
|
406
871
|
|
|
872
|
+
/**
|
|
873
|
+
* Groups items under a title and optional subtitle. Does not create a form control, so child values stay in the
|
|
874
|
+
* parent group.
|
|
875
|
+
*
|
|
876
|
+
* @remarks Registry key: `section`. Config: `title`, `subtitle`, `titleClass` (default `h3`),
|
|
877
|
+
* `subtitleClass` (default `lead`) and `items`.
|
|
878
|
+
*/
|
|
407
879
|
declare class NgsFormsFormSectionComponent extends NgsFormsBaseClassItemsContainerBase<NgsFormsFormSectionConfig> implements OnInit {
|
|
408
880
|
static key: string;
|
|
881
|
+
/** Creates a `section` item. */
|
|
409
882
|
static create(config: NgsFormsFormSectionConfig): NgsFormsFormItem<NgsFormsFormSectionConfig>;
|
|
410
883
|
ngOnInit(): void;
|
|
411
884
|
static ɵfac: i0.ɵɵFactoryDeclaration<NgsFormsFormSectionComponent, never>;
|
|
412
885
|
static ɵcmp: i0.ɵɵComponentDeclaration<NgsFormsFormSectionComponent, "ngs-forms-form-section", never, {}, {}, never, never, true, never>;
|
|
413
886
|
}
|
|
414
887
|
|
|
888
|
+
/** Registration helpers for the structural components in `@ng-simplicity/forms-core`. */
|
|
415
889
|
declare class NgsFormsCoreModule {
|
|
890
|
+
/**
|
|
891
|
+
* Registers the structural components: `form-group`, `form-row`, `column`, `form-array`, `form-array-list`,
|
|
892
|
+
* `form-array-add-item`, `form-array-remove-item`, `text-div`, `content-html` and `section`.
|
|
893
|
+
*
|
|
894
|
+
* @remarks The theme packages call this for you from their own `registerAll…` helpers.
|
|
895
|
+
*/
|
|
416
896
|
static registerCoreNgsFormComponents(registryService: NgsFormsComponentRegistryService): void;
|
|
417
897
|
static ɵfac: i0.ɵɵFactoryDeclaration<NgsFormsCoreModule, never>;
|
|
418
|
-
static ɵmod: i0.ɵɵNgModuleDeclaration<NgsFormsCoreModule, never, [typeof i1.CommonModule, typeof
|
|
898
|
+
static ɵmod: i0.ɵɵNgModuleDeclaration<NgsFormsCoreModule, never, [typeof i1.CommonModule, typeof _angular_forms.FormsModule, typeof _angular_forms.ReactiveFormsModule], never>;
|
|
419
899
|
static ɵinj: i0.ɵɵInjectorDeclaration<NgsFormsCoreModule>;
|
|
420
900
|
}
|
|
421
901
|
|