@@ -24,15 +24,15 @@ Sit back, relax, and let the Error Tailor do all the work!
24
24
25
25
## Getting Started
26
26
27
- Run ` npm install @ngneat/error-tailor ` and add the module to your application:
27
+ Run ` npm install @ngneat/error-tailor ` and add the imports to your application:
28
28
29
29
<!-- prettier-ignore-start -->
30
30
``` ts
31
- @ NgModule ({
32
- declarations: [ AppComponent ],
33
- imports: [
34
- ReactiveFormsModule ,
35
- ErrorTailorModule . forRoot ({
31
+ import { provideErrorTailorConfig } from ' @ngneat/error-tailor ' ;
32
+
33
+ bootstrapApplication ( AppComponent , {
34
+ providers: [
35
+ provideErrorTailorConfig ({
36
36
errors: {
37
37
useValue: {
38
38
required: ' This field is required' ,
@@ -42,10 +42,8 @@ Run `npm install @ngneat/error-tailor` and add the module to your application:
42
42
}
43
43
}
44
44
})
45
- ],
46
- bootstrap: [AppComponent ]
45
+ ]
47
46
})
48
- export class AppModule {}
49
47
```
50
48
<!-- prettier-ignore-end -->
51
49
@@ -81,11 +79,17 @@ Now the only thing you need to add is the `errorTailor` directive to your form:
81
79
```
82
80
83
81
``` ts
82
+ import { errorTailorImports } from ' @ngneat/error-tailor' ;
83
+
84
+ @Component ({
85
+ selector: ' app-root' ,
86
+ standalone: true ,
87
+ imports: [errorTailorImports , ReactiveFormsModule ]
88
+ })
84
89
export class AppComponent {
90
+ private builder = inject (FormBuilder );
85
91
form: FormGroup ;
86
92
87
- constructor (private builder : FormBuilder ) {}
88
-
89
93
ngOnInit() {
90
94
this .form = this .builder .group ({
91
95
name: [' ' , [Validators .required , Validators .minLength (3 )]],
@@ -258,9 +262,12 @@ The library adds a `form-submitted` to the submitted form. You can use it to sty
258
262
a custom control error component.
259
263
260
264
For example:
261
- ``` ts
265
+
266
+ ``` ts
262
267
// Custom error component that will replace the standard DefaultControlErrorComponent.
263
268
@Component ({
269
+ standalone: true ,
270
+ imports: [errorTailorImports ],
264
271
template: `
265
272
<ion-item lines="none" class="ion-text-wrap" [class.hide-control]="hideError">
266
273
<ion-label color="danger" class="ion-no-margin ion-text-wrap" stacked>
@@ -272,23 +279,20 @@ The library adds a `form-submitted` to the submitted form. You can use it to sty
272
279
export class IonicControlErrorComponent extends DefaultControlErrorComponent {
273
280
}
274
281
275
- @NgModule ({
276
- declarations: [AppComponent , IonicControlErrorComponent ],
277
- imports: [
278
- ReactiveFormsModule ,
279
- ErrorTailorModule .forRoot ({
280
- errors: {
281
- useValue: {
282
- required: ' This field is required'
283
- }
284
- },
285
- controlErrorComponent: IonicControlErrorComponent
286
- })
287
- ],
288
- bootstrap: [AppComponent ]
289
- })
290
- export class AppModule {}
291
- ```
282
+ bootstrapApplication (AppComponent , {
283
+ providers: [
284
+ provideErrorTailorConfig ({
285
+ errors: {
286
+ useValue: {
287
+ required: ' This field is required'
288
+ }
289
+ },
290
+ controlErrorComponent: IonicControlErrorComponent
291
+ })
292
+ ]
293
+ })
294
+ ```
295
+
292
296
- ` controlErrorComponentAnchorFn ` - Optional. A hook function that allows the error component's
293
297
HTML element to be repositioned in the DOM. By default error components are inserted at the
294
298
bottom of the field with error. If your UI layout dictates a different positioning
@@ -303,7 +307,8 @@ The library adds a `form-submitted` to the submitted form. You can use it to sty
303
307
Example below shows how the Ionic specific error component is repositioned in the DOM
304
308
to suit Ionic's form layout. ` hostElem ` is the HTML element for the form control and
305
309
` errorElem ` is the HTML element for the error component.
306
- ``` ts
310
+
311
+ ``` ts
307
312
anchorIonicErrorComponent (hostElement : Element , errorElement : Element ) {
308
313
hostElement .parentElement .insertAdjacentElement (' afterend' , errorElement );
309
314
return () => {
@@ -314,23 +319,20 @@ The library adds a `form-submitted` to the submitted form. You can use it to sty
314
319
};
315
320
}
316
321
317
- @NgModule ({
318
- declarations: [AppComponent , IonicControlErrorComponent ],
319
- imports: [
320
- ReactiveFormsModule ,
321
- ErrorTailorModule .forRoot ({
322
- errors: {
323
- useValue: {
324
- required: ' This field is required'
325
- }
326
- },
327
- controlErrorComponent: IonicControlErrorComponent ,
328
- controlErrorComponentAnchorFn: anchorIonicErrorComponent
329
- })
330
- ],
331
- bootstrap: [AppComponent ]
332
- })
333
- export class AppModule {}
322
+ bootstrapApplication (AppComponent , {
323
+ providers: [
324
+ provideErrorTailorConfig ({
325
+ errors: {
326
+ useValue: {
327
+ required: ' This field is required'
328
+ }
329
+ },
330
+ controlErrorComponent: IonicControlErrorComponent ,
331
+ controlErrorComponentAnchorFn: anchorIonicErrorComponent
332
+ })
333
+ ]
334
+ })
335
+
334
336
```
335
337
336
338
- ` controlErrorsOn ` - Optional. An object that allows the default behavior for showing the errors to be overridden. (each individual property in the object is optional, so it's possible to override only 1 setting)
@@ -354,10 +356,9 @@ Here's how to support i18n:
354
356
``` ts
355
357
import { TranslocoService } from ' @ngneat/transloco' ;
356
358
357
- @NgModule ({
358
- declarations: [AppComponent ],
359
- imports: [
360
- ErrorTailorModule .forRoot ({
359
+ bootstrapApplication (AppComponent , {
360
+ providers: [
361
+ provideErrorTailorConfig ({
361
362
errors: {
362
363
useFactory(service : TranslocoService ) {
363
364
return {
@@ -367,10 +368,8 @@ import { TranslocoService } from '@ngneat/transloco';
367
368
deps: [TranslocoService ]
368
369
}
369
370
})
370
- ],
371
- bootstrap: [AppComponent ]
371
+ ]
372
372
})
373
- export class AppModule {}
374
373
```
375
374
376
375
### Control Error Style
@@ -385,30 +384,3 @@ Here's a default style you can use for the error component:
385
384
color : #dc3545 ;
386
385
}
387
386
```
388
-
389
- ## Contributors ✨
390
-
391
- Thanks goes to these wonderful people ([ emoji key] ( https://allcontributors.org/docs/en/emoji-key ) ):
392
-
393
- <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
394
- <!-- prettier-ignore-start -->
395
- <!-- markdownlint-disable -->
396
- <table >
397
- <tr >
398
- <td align="center"><a href="https://www.netbasal.com"><img src="https://avatars1.githubusercontent.com/u/6745730?v=4" width="100px;" alt=""/><br /><sub><b>Netanel Basal</b></sub></a><br /><a href="https://github.com/@ngneat/error-tailor/commits?author=NetanelBasal" title="Code">💻</a> <a href="https://github.com/@ngneat/error-tailor/commits?author=NetanelBasal" title="Documentation">📖</a> <a href="#ideas-NetanelBasal" title="Ideas, Planning, & Feedback">🤔</a> <a href="#infra-NetanelBasal" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td>
399
- <td align="center"><a href="https://github.com/tonivj5"><img src="https://avatars2.githubusercontent.com/u/7110786?v=4" width="100px;" alt=""/><br /><sub><b>Toni Villena</b></sub></a><br /><a href="https://github.com/@ngneat/error-tailor/commits?author=tonivj5" title="Code">💻</a> <a href="https://github.com/@ngneat/error-tailor/commits?author=tonivj5" title="Tests">⚠️</a></td>
400
- <td align="center"><a href="https://github.com/theblushingcrow"><img src="https://avatars3.githubusercontent.com/u/638818?v=4" width="100px;" alt=""/><br /><sub><b>Inbal Sinai</b></sub></a><br /><a href="https://github.com/@ngneat/error-tailor/commits?author=theblushingcrow" title="Documentation">📖</a></td>
401
- <td align="center"><a href="https://twitter.com/dmorosinotto"><img src="https://avatars2.githubusercontent.com/u/3982050?v=4" width="100px;" alt=""/><br /><sub><b>Daniele Morosinotto</b></sub></a><br /><a href="https://github.com/@ngneat/error-tailor/commits?author=dmorosinotto" title="Code">💻</a> <a href="https://github.com/@ngneat/error-tailor/commits?author=dmorosinotto" title="Documentation">📖</a> <a href="#example-dmorosinotto" title="Examples">💡</a></td>
402
- <td align="center"><a href="https://github.com/rhutchison"><img src="https://avatars3.githubusercontent.com/u/1460261?v=4" width="100px;" alt=""/><br /><sub><b>Ryan Hutchison</b></sub></a><br /><a href="https://github.com/@ngneat/error-tailor/issues?q=author%3Arhutchison" title="Bug reports">🐛</a> <a href="https://github.com/@ngneat/error-tailor/commits?author=rhutchison" title="Documentation">📖</a> <a href="https://github.com/@ngneat/error-tailor/commits?author=rhutchison" title="Code">💻</a> <a href="https://github.com/@ngneat/error-tailor/commits?author=rhutchison" title="Tests">⚠️</a></td>
403
- <td align="center"><a href="http://www.mlc.cz"><img src="https://avatars3.githubusercontent.com/u/5693835?v=4" width="100px;" alt=""/><br /><sub><b>Miloš Lapiš</b></sub></a><br /><a href="https://github.com/@ngneat/error-tailor/commits?author=mlc-mlapis" title="Code">💻</a></td>
404
- <td align="center"><a href="http://www.smallpearl.com"><img src="https://avatars3.githubusercontent.com/u/6202401?v=4" width="100px;" alt=""/><br /><sub><b>Hari Mahadevan</b></sub></a><br /><a href="https://github.com/@ngneat/error-tailor/commits?author=harikvpy" title="Code">💻</a></td>
405
- </tr >
406
- </table >
407
-
408
- <!-- markdownlint-enable -->
409
- <!-- prettier-ignore-end -->
410
- <!-- ALL-CONTRIBUTORS-LIST:END -->
411
-
412
- This project follows the [ all-contributors] ( https://github.com/all-contributors/all-contributors ) specification. Contributions of any kind welcome!
413
-
414
- Icon made by <a href =" https://www.flaticon.com/authors/nhor-phai " title =" Nhor Phai " >Nhor Phai</a > from <a href =" https://www.flaticon.com/ " title =" Flaticon " > www.flaticon.com </a >
0 commit comments