@@ -24,15 +24,15 @@ Sit back, relax, and let the Error Tailor do all the work!
2424
2525## Getting Started
2626
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:
2828
2929<!-- prettier-ignore-start -->
3030``` 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 ({
3636 errors: {
3737 useValue: {
3838 required: ' This field is required' ,
@@ -42,10 +42,8 @@ Run `npm install @ngneat/error-tailor` and add the module to your application:
4242 }
4343 }
4444 })
45- ],
46- bootstrap: [AppComponent ]
45+ ]
4746})
48- export class AppModule {}
4947```
5048<!-- prettier-ignore-end -->
5149
@@ -81,11 +79,17 @@ Now the only thing you need to add is the `errorTailor` directive to your form:
8179```
8280
8381``` ts
82+ import { errorTailorImports } from ' @ngneat/error-tailor' ;
83+
84+ @Component ({
85+ selector: ' app-root' ,
86+ standalone: true ,
87+ imports: [errorTailorImports , ReactiveFormsModule ]
88+ })
8489export class AppComponent {
90+ private builder = inject (FormBuilder );
8591 form: FormGroup ;
8692
87- constructor (private builder : FormBuilder ) {}
88-
8993 ngOnInit() {
9094 this .form = this .builder .group ({
9195 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
258262 a custom control error component.
259263
260264 For example:
261- ``` ts
265+
266+ ``` ts
262267 // Custom error component that will replace the standard DefaultControlErrorComponent.
263268 @Component ({
269+ standalone: true ,
270+ imports: [errorTailorImports ],
264271 template: `
265272 <ion-item lines="none" class="ion-text-wrap" [class.hide-control]="hideError">
266273 <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
272279 export class IonicControlErrorComponent extends DefaultControlErrorComponent {
273280 }
274281
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+
292296- ` controlErrorComponentAnchorFn ` - Optional. A hook function that allows the error component's
293297 HTML element to be repositioned in the DOM. By default error components are inserted at the
294298 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
303307 Example below shows how the Ionic specific error component is repositioned in the DOM
304308 to suit Ionic's form layout. ` hostElem ` is the HTML element for the form control and
305309 ` errorElem ` is the HTML element for the error component.
306- ``` ts
310+
311+ ``` ts
307312 anchorIonicErrorComponent (hostElement : Element , errorElement : Element ) {
308313 hostElement .parentElement .insertAdjacentElement (' afterend' , errorElement );
309314 return () => {
@@ -314,23 +319,20 @@ The library adds a `form-submitted` to the submitted form. You can use it to sty
314319 };
315320 }
316321
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+
334336 ```
335337
336338- ` 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:
354356``` ts
355357import { TranslocoService } from ' @ngneat/transloco' ;
356358
357- @NgModule ({
358- declarations: [AppComponent ],
359- imports: [
360- ErrorTailorModule .forRoot ({
359+ bootstrapApplication (AppComponent , {
360+ providers: [
361+ provideErrorTailorConfig ({
361362 errors: {
362363 useFactory(service : TranslocoService ) {
363364 return {
@@ -367,10 +368,8 @@ import { TranslocoService } from '@ngneat/transloco';
367368 deps: [TranslocoService ]
368369 }
369370 })
370- ],
371- bootstrap: [AppComponent ]
371+ ]
372372})
373- export class AppModule {}
374373```
375374
376375### Control Error Style
@@ -385,30 +384,3 @@ Here's a default style you can use for the error component:
385384 color : #dc3545 ;
386385}
387386```
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