ngx-form-rules 0.0.1 → 1.0.1
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 +99 -144
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,180 +1,135 @@
|
|
|
1
1
|
# ngx-form-rules
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
<p align="center"><img src="https://bdprescription.com/npm-package/ng-package.png" height="200px" align="center" alt="JS Beautifier"></p>
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
<p align="center"><a href="#">
|
|
6
|
+
<img alt="Join the chat" src="https://bdprescription.com/npm-package/JoinChat.svg"></a>
|
|
7
|
+
<a href="https://www.linkedin.com/in/bulbulsarker/" target="_blank">
|
|
8
|
+
<img alt="Linkedin Follow" src="https://bdprescription.com/npm-package/linkedins.svg">
|
|
9
|
+
</a>
|
|
10
|
+
</p>
|
|
6
11
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
- `NgxFormRulesService` (service)
|
|
12
|
+
### Form Design
|
|
13
|
+
```
|
|
14
|
+
Easily enable and disable Angular reactive form fields using simple rules
|
|
15
|
+
```
|
|
16
|
+
<p align="center"><a href="#" target="_blank"><img alt="NPM stats" src="https://bdprescription.com/npm-package/ng-package-bg.png"></a></p>
|
|
13
17
|
|
|
14
|
-
### FormRule
|
|
15
18
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
onValue: any; // value that triggers the rule (true/false or any value)
|
|
20
|
-
disable: string[]; // control names to disable when rule matches
|
|
21
|
-
enable: string[]; // control names to enable when rule matches
|
|
22
|
-
}
|
|
19
|
+
## Description
|
|
20
|
+
```
|
|
21
|
+
A lightweight Angular library to easily enable, disable, and control reactive form fields using simple, declarative rules. Built for Angular Reactive Forms with zero dependencies.
|
|
23
22
|
```
|
|
24
23
|
|
|
25
|
-
### NgxFormRulesService
|
|
26
24
|
|
|
27
|
-
|
|
25
|
+
## Installation
|
|
28
26
|
|
|
29
|
-
|
|
30
|
-
|
|
27
|
+
```
|
|
28
|
+
npm i ngx-form-rules
|
|
29
|
+
```
|
|
31
30
|
|
|
32
|
-
|
|
33
|
-
- Runs rules once against current values (useful on initial load to set correct enabled/disabled states).
|
|
31
|
+
## Uninstall
|
|
34
32
|
|
|
35
|
-
|
|
33
|
+
```
|
|
34
|
+
npm uninstall ngx-form-rules
|
|
35
|
+
```
|
|
36
36
|
|
|
37
|
-
##
|
|
37
|
+
## 💞 How to User 💞
|
|
38
38
|
|
|
39
|
-
|
|
39
|
+
#### Create a file `checking-rules.config.ts` or `checking-rules.ts`
|
|
40
40
|
|
|
41
41
|
```ts
|
|
42
42
|
import { FormRule } from 'ngx-form-rules';
|
|
43
43
|
|
|
44
44
|
export const RULES: FormRule[] = [
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
45
|
+
{
|
|
46
|
+
trigger: 'valueA',
|
|
47
|
+
onValue: true,
|
|
48
|
+
disable: ['valueC'],
|
|
49
|
+
enable: ['valueB']
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
trigger: 'valueA',
|
|
53
|
+
onValue: false,
|
|
54
|
+
disable: ['valueB'],
|
|
55
|
+
enable: []
|
|
56
|
+
}
|
|
51
57
|
];
|
|
52
58
|
```
|
|
53
59
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
## Example — component wiring
|
|
57
|
-
|
|
58
|
-
Minimal example showing form setup and service usage in `src/app/app.component.ts`:
|
|
60
|
+
#### In ts file `app.component.ts`
|
|
59
61
|
|
|
60
62
|
```ts
|
|
61
|
-
import {
|
|
62
|
-
import {
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
63
|
+
import { NgxFormRulesService } from 'ngx-form-rules';
|
|
64
|
+
import { RULES } from './checking-rules.config';
|
|
65
|
+
|
|
66
|
+
@Component({
|
|
67
|
+
selector: 'app-root',
|
|
68
|
+
templateUrl: './app.component.html',
|
|
69
|
+
styleUrls: ['./app.component.scss']
|
|
70
|
+
})
|
|
71
|
+
export class AppComponent implements OnInit{
|
|
72
|
+
|
|
68
73
|
form: FormGroup;
|
|
74
|
+
private readonly FORM_RULES = RULES;
|
|
69
75
|
|
|
70
|
-
constructor(
|
|
76
|
+
constructor(
|
|
77
|
+
private fb: FormBuilder,
|
|
78
|
+
private ruleEngine: NgxFormRulesService) {
|
|
79
|
+
}
|
|
71
80
|
|
|
72
81
|
ngOnInit(): void {
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
isLandAccurateData: [null],
|
|
78
|
-
isCommitteeComments: [null],
|
|
79
|
-
landAcqCostBasis: [null],
|
|
80
|
-
isLandCostBasisData: [null],
|
|
81
|
-
isVeriCostEstiComments: [null],
|
|
82
|
-
rehabComply: [null],
|
|
83
|
-
rehabDataComply: [null],
|
|
84
|
-
verJustLandComments: [null]
|
|
82
|
+
this.form = this.fb.group({
|
|
83
|
+
valueA: [''],
|
|
84
|
+
valueB: [''],
|
|
85
|
+
valueC: ['']
|
|
85
86
|
});
|
|
86
87
|
|
|
87
|
-
this.
|
|
88
|
-
this.
|
|
88
|
+
this.ruleEngine.applyRules(this.form, this.FORM_RULES); // Apply rules to the form
|
|
89
|
+
// this.onLoadData();
|
|
90
|
+
}
|
|
91
|
+
/*
|
|
92
|
+
onLoadData(): void {
|
|
93
|
+
this.partThreeService.getPartThreeByUuId(this.id).subscribe(
|
|
94
|
+
(res) => {
|
|
95
|
+
if (res && res.id) {
|
|
96
|
+
this.form.patchValue(res);
|
|
97
|
+
this.ruleEngine.syncRulesWithCurrentValues(this.form, this.FORM_RULES);
|
|
98
|
+
}
|
|
99
|
+
this.isDataLoaded = true;},
|
|
100
|
+
(error) => { this.isDataLoaded = true; }
|
|
101
|
+
);
|
|
102
|
+
}
|
|
103
|
+
*/
|
|
89
104
|
}
|
|
90
|
-
}
|
|
91
105
|
```
|
|
92
|
-
|
|
93
|
-
And a minimal `app.component.html` showing a couple of controls:
|
|
106
|
+
#### In html file `app.component.html`
|
|
94
107
|
|
|
95
108
|
```html
|
|
96
|
-
<form
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
109
|
+
<form
|
|
110
|
+
[formGroup]="form"
|
|
111
|
+
name="formGroup"
|
|
112
|
+
novalidate style="margin-top: 20px; display: flex; justify-content: center; align-items: center; ">
|
|
113
|
+
<div style="width: 50%;">
|
|
114
|
+
<div class="font-bold mb-4">
|
|
115
|
+
Availability, Quantity, Category of Land: Is the availability, the quantity, and the category of the land clearly stated?
|
|
116
|
+
</div><br>
|
|
117
|
+
<app-radio-field [control]="form.get('valueA')"
|
|
118
|
+
[label]="'a) Check the availability of information'"
|
|
119
|
+
[option1]="{ label: 'Information is available', value: true }"
|
|
120
|
+
[option2]="{ label: 'Information is not available (skip b and go to c)', value: false }">
|
|
121
|
+
</app-radio-field>
|
|
122
|
+
<br />
|
|
123
|
+
<app-radio-field [control]="form.get('valueB')"
|
|
124
|
+
[label]="'b) Check the quality of information'"
|
|
125
|
+
[option1]="{ label: 'Appropriate as indicated', value: true }"
|
|
126
|
+
[option2]="{ label: 'Needs amendment', value: false }">
|
|
127
|
+
</app-radio-field>
|
|
128
|
+
<br />
|
|
129
|
+
<app-textarea-field
|
|
130
|
+
[label]="'c) Remarks and suggestions'"
|
|
131
|
+
[control]="form.get('valueC')">
|
|
132
|
+
</app-textarea-field>
|
|
133
|
+
</div>
|
|
114
134
|
</form>
|
|
115
135
|
```
|
|
116
|
-
|
|
117
|
-
## Build & local consumption (recommended workflow)
|
|
118
|
-
|
|
119
|
-
You can test the library locally without publishing to npm by building it and using the package name import. The workspace `tsconfig.json` is already configured with a path mapping so `import { ... } from 'ngx-form-rules'` resolves to `dist/ngx-form-rules` after the build.
|
|
120
|
-
|
|
121
|
-
1. Build the library:
|
|
122
|
-
|
|
123
|
-
```bash
|
|
124
|
-
ng build ngx-form-rules
|
|
125
|
-
```
|
|
126
|
-
|
|
127
|
-
2a. (Preferred for workspace) Restart your dev server or IDE typecheck so imports resolve to `dist/ngx-form-rules`.
|
|
128
|
-
|
|
129
|
-
2b. (Alternative) Create a tarball and install locally in your app:
|
|
130
|
-
|
|
131
|
-
```bash
|
|
132
|
-
cd dist/ngx-form-rules
|
|
133
|
-
npm pack
|
|
134
|
-
cd ../../
|
|
135
|
-
npm install ./dist/ngx-form-rules/ngx-form-rules-0.0.1.tgz
|
|
136
|
-
```
|
|
137
|
-
|
|
138
|
-
## Publish to npm
|
|
139
|
-
|
|
140
|
-
From the built artifact directory:
|
|
141
|
-
|
|
142
|
-
```bash
|
|
143
|
-
cd dist/ngx-form-rules
|
|
144
|
-
npm publish --access public
|
|
145
|
-
```
|
|
146
|
-
|
|
147
|
-
Then in your consumer app (after publishing):
|
|
148
|
-
|
|
149
|
-
```bash
|
|
150
|
-
npm install ngx-form-rules
|
|
151
|
-
```
|
|
152
|
-
|
|
153
|
-
and import as:
|
|
154
|
-
|
|
155
|
-
```ts
|
|
156
|
-
import { NgxFormRulesService, FormRule } from 'ngx-form-rules';
|
|
157
|
-
```
|
|
158
|
-
|
|
159
|
-
## Notes & best practices
|
|
160
|
-
|
|
161
|
-
- Ensure every name referenced by `trigger`, `disable`, and `enable` appears as a control in the consuming `FormGroup`.
|
|
162
|
-
- The service marks disabled controls with `emitEvent: false` and will restore values from an internal snapshot where available when re-enabling.
|
|
163
|
-
- Avoid `npm link` for Angular libraries unless you understand peer dependency handling — prefer `npm pack` or workspace path mapping.
|
|
164
|
-
|
|
165
|
-
## Troubleshooting
|
|
166
|
-
|
|
167
|
-
- If `import 'ngx-form-rules'` is not resolved locally after `ng build ngx-form-rules`, make sure:
|
|
168
|
-
- `tsconfig.json` contains the `paths` entry mapping `ngx-form-rules` to `dist/ngx-form-rules`.
|
|
169
|
-
- You restarted the dev server / TypeScript language service.
|
|
170
|
-
|
|
171
|
-
- If you see runtime errors complaining about multiple Angular instances after `npm link`, remove the link and use `npm pack` / local install instead.
|
|
172
|
-
|
|
173
|
-
---
|
|
174
|
-
|
|
175
|
-
If you'd like, I can also:
|
|
176
|
-
|
|
177
|
-
- Add a short demo component in `src/app/` wired to the rules and add a unit test.
|
|
178
|
-
- Add a small `USAGE.md` in the root with copy-paste snippets for consuming apps.
|
|
179
|
-
|
|
180
|
-
Happy to add those next.
|