@ng-modular-forms/core 0.7.3 → 0.7.4
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 +21 -9
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -57,12 +57,15 @@ npm install @ng-modular-forms/material
|
|
|
57
57
|
Coordinates form structure and lifecycle.
|
|
58
58
|
|
|
59
59
|
```ts
|
|
60
|
-
import {
|
|
60
|
+
import {
|
|
61
|
+
FormOrchestrator, FormHydrator, FormSerializer
|
|
62
|
+
} from '@ng-modular-forms/core';
|
|
61
63
|
|
|
62
64
|
@Component({
|
|
63
65
|
selector: 'app-example',
|
|
64
66
|
imports: [ReactiveFormsModule],
|
|
65
|
-
|
|
67
|
+
// Handlers are scoped to the component, not the whole application.
|
|
68
|
+
providers: [SectionAHandler],
|
|
66
69
|
template: `
|
|
67
70
|
<form [formGroup]="form" (ngSubmit)="submit()">
|
|
68
71
|
<app-section-a [form]="getSubForm('sectionA')" />
|
|
@@ -90,7 +93,7 @@ export class ExampleComponent extends FormOrchestrator {
|
|
|
90
93
|
sectionA: new SectionAMapper()
|
|
91
94
|
};
|
|
92
95
|
|
|
93
|
-
// The mapperRegistry and handlerRegistry are optional
|
|
96
|
+
// The mapperRegistry and handlerRegistry are optional
|
|
94
97
|
this.orchestrate({ form, handlerRegistry, mapperRegistry });
|
|
95
98
|
|
|
96
99
|
const model = { fieldA: "aValue", fieldB: "bValue" };
|
|
@@ -174,7 +177,9 @@ Handles transformations between API and form. `FormHydrator` and `FormSerializer
|
|
|
174
177
|
```ts
|
|
175
178
|
import { FormMapperBase, getControlValue } from '@ng-modular-forms/core';
|
|
176
179
|
|
|
177
|
-
export class SectionAMapper extends FormMapperBase<
|
|
180
|
+
export class SectionAMapper extends FormMapperBase<
|
|
181
|
+
ApiModel, RequestModel, FormModel
|
|
182
|
+
> {
|
|
178
183
|
toRequest(form: FormGroup): RequestModel {
|
|
179
184
|
const fieldAValue = getControlValue<string>('fieldA', form);
|
|
180
185
|
const fieldBValue = getControlValue<string>('fieldB', form);
|
|
@@ -192,8 +197,9 @@ export class SectionAMapper extends FormMapperBase<ApiModel, RequestModel, FormM
|
|
|
192
197
|
}
|
|
193
198
|
}
|
|
194
199
|
|
|
195
|
-
// Each model can have its own shape.
|
|
196
|
-
//
|
|
200
|
+
// Each model can have its own shape.
|
|
201
|
+
// If all are the same, you only need one and others will inherit from it.
|
|
202
|
+
// FormMapperBase<T> is the same as FormMapperBase<T, T, T>
|
|
197
203
|
type ApiModel = {
|
|
198
204
|
fieldA: string;
|
|
199
205
|
fieldB: string;
|
|
@@ -245,7 +251,9 @@ export class ExampleComponent {
|
|
|
245
251
|
|
|
246
252
|
FormOrchestrator usage:
|
|
247
253
|
```ts
|
|
248
|
-
import {
|
|
254
|
+
import {
|
|
255
|
+
FormOrchestrator, FormHydrator, FormSerializer
|
|
256
|
+
} from '@ng-modular-forms/core';
|
|
249
257
|
|
|
250
258
|
@Component({...})
|
|
251
259
|
export class ExampleComponent extends FormOrchestrator {
|
|
@@ -296,7 +304,9 @@ export class ExampleComponent {
|
|
|
296
304
|
|
|
297
305
|
FormOrchestrator usage:
|
|
298
306
|
```ts
|
|
299
|
-
import {
|
|
307
|
+
import {
|
|
308
|
+
FormOrchestrator, FormHydrator, FormSerializer
|
|
309
|
+
} from '@ng-modular-forms/core';
|
|
300
310
|
|
|
301
311
|
@Component({...})
|
|
302
312
|
export class ExampleComponent extends FormOrchestrator {
|
|
@@ -324,7 +334,9 @@ export class ExampleComponent extends FormOrchestrator {
|
|
|
324
334
|
## Input Component Example (No Orchestration)
|
|
325
335
|
|
|
326
336
|
```ts
|
|
327
|
-
import {
|
|
337
|
+
import {
|
|
338
|
+
InputTextComponent, InputCurrencyComponent
|
|
339
|
+
} from '@ng-modular-forms/core';
|
|
328
340
|
|
|
329
341
|
@Component({
|
|
330
342
|
template: `
|