@ng-modular-forms/material 0.9.1 → 0.9.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 +36 -23
- package/fesm2022/ng-modular-forms-material.mjs +156 -114
- package/fesm2022/ng-modular-forms-material.mjs.map +1 -1
- package/lib/base/mat-form-control-base.d.ts +9 -6
- package/lib/controls/lookup/lookup.component.d.ts +1 -0
- package/lib/controls/select/select.component.d.ts +1 -0
- package/lib/providers/mat-config.provider.d.ts +10 -0
- package/package.json +2 -2
- package/public-api.d.ts +1 -0
package/README.md
CHANGED
|
@@ -40,7 +40,42 @@ Add the global styles to your application's angular.json file under the styles a
|
|
|
40
40
|
]
|
|
41
41
|
```
|
|
42
42
|
|
|
43
|
-
##
|
|
43
|
+
## Global configuration
|
|
44
|
+
Material controls can be configured globally using `provideNmfMaterialConfig`.
|
|
45
|
+
|
|
46
|
+
This configuration only affects visual behavior of Material components.
|
|
47
|
+
|
|
48
|
+
### Available options
|
|
49
|
+
|
|
50
|
+
```typescript
|
|
51
|
+
appearance: MatFormFieldAppearance;
|
|
52
|
+
floatLabel: FloatLabelType;
|
|
53
|
+
detatchLabels: boolean;
|
|
54
|
+
hideRequiredMarker: boolean;
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
### Example
|
|
58
|
+
```typescript
|
|
59
|
+
import { ApplicationConfig } from '@angular/core';
|
|
60
|
+
import { provideNmfMaterialConfig } from '@ng-modular-forms/material';
|
|
61
|
+
|
|
62
|
+
export const appConfig: ApplicationConfig = {
|
|
63
|
+
providers: [
|
|
64
|
+
provideNmfMaterialConfig({
|
|
65
|
+
floatLabel: 'always',
|
|
66
|
+
appearance: 'outline',
|
|
67
|
+
}),
|
|
68
|
+
],
|
|
69
|
+
};
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
### Translation
|
|
73
|
+
|
|
74
|
+
Translation is handled globally by <a href="https://www.npmjs.com/package/@ng-modular-forms/core">@ng-modular-forms/core</a>. This includes validation messages.
|
|
75
|
+
|
|
76
|
+
Material components automatically use the core configuration.
|
|
77
|
+
|
|
78
|
+
## Usage Example
|
|
44
79
|
|
|
45
80
|
```typescript
|
|
46
81
|
import { MatInputTextComponent } from "@ng-modular-forms/material";
|
|
@@ -63,28 +98,6 @@ export class ExampleComponent {
|
|
|
63
98
|
}
|
|
64
99
|
```
|
|
65
100
|
|
|
66
|
-
## Why ng-modular-forms?
|
|
67
|
-
|
|
68
|
-
Angular Reactive Forms often become difficult to maintain as applications grow:
|
|
69
|
-
|
|
70
|
-
- Reactive subscriptions spread across components
|
|
71
|
-
- Cross-field behavior becomes tightly coupled
|
|
72
|
-
- API mapping logic becomes duplicated
|
|
73
|
-
- Large forms become difficult to test and reuse
|
|
74
|
-
|
|
75
|
-
`@ng-modular-forms/core` introduces a modular architecture that separates:
|
|
76
|
-
|
|
77
|
-
- form orchestration
|
|
78
|
-
- reactive behavior
|
|
79
|
-
- API mapping
|
|
80
|
-
- reusable form controls
|
|
81
|
-
|
|
82
|
-
Built on top of Angular Reactive Forms — not a replacement.
|
|
83
|
-
|
|
84
|
-
Designed for scalable, enterprise-grade Angular applications.
|
|
85
|
-
|
|
86
|
-
Compatible with Angular 19–21.
|
|
87
|
-
|
|
88
101
|
## Available Input Components
|
|
89
102
|
|
|
90
103
|
All components share a consistent API and are interchangeable between Native and Material implementations without changing form logic.
|