ngx-form-stepper 0.0.9 → 0.0.11
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 +49 -1
- package/package.json +2 -1
package/README.md
CHANGED
|
@@ -156,6 +156,34 @@ export type ValidatorsNames =
|
|
|
156
156
|
| 'maxDate';
|
|
157
157
|
```
|
|
158
158
|
|
|
159
|
+
## Reusing typed validators
|
|
160
|
+
|
|
161
|
+
**ngx-form-stepper** allows you to factor them while keeping strict typing based on the `Input` type.
|
|
162
|
+
|
|
163
|
+
```typescript
|
|
164
|
+
const reqVal: Validator<'required'> = required('Le champ est requis');
|
|
165
|
+
```
|
|
166
|
+
|
|
167
|
+
Then you can create groups of `validators` compatible only with a given `Input` type :
|
|
168
|
+
|
|
169
|
+
```typescript
|
|
170
|
+
const emailValidators: ValidatorTuple<ValidatorsNamesOfType<InputType.Email>> = [
|
|
171
|
+
reqVal,
|
|
172
|
+
email("L'email n'est pas valide"),
|
|
173
|
+
];
|
|
174
|
+
```
|
|
175
|
+
|
|
176
|
+
What is impossible (and intentional)
|
|
177
|
+
|
|
178
|
+
```typescript
|
|
179
|
+
// ❌ Compilation error
|
|
180
|
+
const badValidators: ValidatorTuple<ValidatorsNamesOfType<InputType.Number>> = [
|
|
181
|
+
email('Invalid email'),
|
|
182
|
+
];
|
|
183
|
+
```
|
|
184
|
+
|
|
185
|
+
This error is detected at compile time, even before running the application.
|
|
186
|
+
|
|
159
187
|
## Select
|
|
160
188
|
|
|
161
189
|
Tuple of one or more `SelectItem`.
|
|
@@ -209,6 +237,16 @@ export type StepConfig = Readonly<{
|
|
|
209
237
|
}>;
|
|
210
238
|
```
|
|
211
239
|
|
|
240
|
+
Duplication of `returnKey` is forbidden (and intentional)
|
|
241
|
+
|
|
242
|
+
```typescript
|
|
243
|
+
// ❌ Compilation error
|
|
244
|
+
new Step([
|
|
245
|
+
new Input(InputType.Text, null, 'name', 'First name'),
|
|
246
|
+
new Input(InputType.Text, null, 'name', 'Last name'),
|
|
247
|
+
]);
|
|
248
|
+
```
|
|
249
|
+
|
|
212
250
|
## FormStepper
|
|
213
251
|
|
|
214
252
|
Impossible to duplicate an `Input` return key between two `Steps`.
|
|
@@ -288,7 +326,10 @@ classNames: SingleStepClassNames = {
|
|
|
288
326
|
},
|
|
289
327
|
};
|
|
290
328
|
|
|
291
|
-
form = new FormStepper([this.step], {
|
|
329
|
+
form = new FormStepper([this.step], {
|
|
330
|
+
buttonText: 'Submit',
|
|
331
|
+
classNames: this.classNames,
|
|
332
|
+
});
|
|
292
333
|
```
|
|
293
334
|
|
|
294
335
|
```css
|
|
@@ -384,3 +425,10 @@ export type MultiStepClassNames = DeepPartial<{
|
|
|
384
425
|
};
|
|
385
426
|
}>;
|
|
386
427
|
```
|
|
428
|
+
|
|
429
|
+
## In summary
|
|
430
|
+
|
|
431
|
+
- Common errors are impossible
|
|
432
|
+
- Types guide the implementation
|
|
433
|
+
- The final form is always consistent
|
|
434
|
+
- The compiler becomes an ally
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ngx-form-stepper",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.11",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "git+https://github.com/rayaneriahi/ngx-form-stepper.git"
|
|
@@ -8,6 +8,7 @@
|
|
|
8
8
|
"bugs": {
|
|
9
9
|
"url": "https://github.com/rayaneriahi/ngx-form-stepper/issues"
|
|
10
10
|
},
|
|
11
|
+
"homepage": "https://github.com/rayaneriahi/ngx-form-stepper#readme",
|
|
11
12
|
"peerDependencies": {
|
|
12
13
|
"@angular/common": "^20.3.0",
|
|
13
14
|
"@angular/core": "^20.3.0"
|