@mosaicoo/form-angular 0.1.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
ADDED
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
# @mosaicoo/form-angular
|
|
2
|
+
|
|
3
|
+
Angular renderer for [Mosaicoo Form](https://www.npmjs.com/package/@mosaicoo/form-core):
|
|
4
|
+
renders dynamic forms at runtime from a schema (or any definition an importer
|
|
5
|
+
understands), with validation, conditional visibility, repeatable rows, tabs
|
|
6
|
+
and wizard mode — accessible by default and themable by CSS tokens.
|
|
7
|
+
|
|
8
|
+
```ts
|
|
9
|
+
import { FormRendererComponent } from '@mosaicoo/form-angular';
|
|
10
|
+
|
|
11
|
+
@Component({
|
|
12
|
+
imports: [FormRendererComponent],
|
|
13
|
+
template: `
|
|
14
|
+
<mform-renderer
|
|
15
|
+
[source]="definition"
|
|
16
|
+
[optionsProviders]="providers"
|
|
17
|
+
[messages]="ptBr"
|
|
18
|
+
(submitted)="onSubmitted($event)"
|
|
19
|
+
/>
|
|
20
|
+
`,
|
|
21
|
+
})
|
|
22
|
+
export class MyPage {}
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
## Highlights
|
|
26
|
+
|
|
27
|
+
- **Standalone, signals, zoneless-ready** — Angular 21+, OnPush throughout.
|
|
28
|
+
- **Accessible by default** — linked labels, `aria-required/invalid/
|
|
29
|
+
describedby`, `role=alert` errors, focus moves to the first invalid field
|
|
30
|
+
on submit.
|
|
31
|
+
- **Wizard mode** — schemas with `display: 'wizard'` render top-level
|
|
32
|
+
containers as steps; *Next* is blocked by per-step validation and submit
|
|
33
|
+
jumps to the step owning the first error.
|
|
34
|
+
- **Dynamic options without scripts** — `[optionsProviders]` maps named
|
|
35
|
+
providers to host functions (authenticated APIs, caching, tenant catalogs);
|
|
36
|
+
`refreshOn` re-resolves when observed data changes.
|
|
37
|
+
- **Own look, host's brand** — every style reads a `--mform-*` CSS custom
|
|
38
|
+
property with a built-in fallback. Define the tokens on any ancestor and
|
|
39
|
+
the form adopts your design system; override `[labels]` and `[messages]`
|
|
40
|
+
to localize.
|
|
41
|
+
|
|
42
|
+
## Theming example
|
|
43
|
+
|
|
44
|
+
```css
|
|
45
|
+
:root {
|
|
46
|
+
--mform-primary: #0f766e;
|
|
47
|
+
--mform-radius: 2px;
|
|
48
|
+
--mform-font: Georgia, serif;
|
|
49
|
+
}
|
|
50
|
+
```
|