Skip to content

Commit c7503c5

Browse files
authored
V15 (#91)
* chore: 🤖 v14 * feat: upgrade to v15 BREAKING CHANGE: upgrade to v15 - peer dep is now Angular v14 - remove `ErrorTailorModule` * chore(release): 3.0.0 * chore(release): 3.0.1
1 parent 98a0019 commit c7503c5

24 files changed

+18068
-25055
lines changed

.github/workflows/test.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ jobs:
1212

1313
strategy:
1414
matrix:
15-
node-version: [12.x]
15+
node-version: [16.x]
1616

1717
steps:
1818
- uses: actions/checkout@v2

CHANGELOG.md

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,22 @@
22

33
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
44

5+
### [3.0.1](https://github.com/ngneat/error-tailor/compare/v3.0.0...v3.0.1) (2022-11-27)
6+
7+
## [3.0.0](https://github.com/ngneat/error-tailor/compare/v2.2.2...v3.0.0) (2022-11-27)
8+
9+
10+
### ⚠ BREAKING CHANGES
11+
12+
* upgrade to v15
13+
14+
- peer dep is now Angular v14
15+
- remove `ErrorTailorModule`
16+
17+
### Features
18+
19+
* upgrade to v15 ([672f552](https://github.com/ngneat/error-tailor/commit/672f552f6ca26b1da5345fcb35fd07c1637f698a))
20+
521
### [2.2.2](https://github.com/ngneat/error-tailor/compare/v2.2.1...v2.2.2) (2022-09-23)
622

723

README.md

Lines changed: 53 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -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+
})
8489
export 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
355357
import { 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>

angular.json

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -134,6 +134,5 @@
134134
}
135135
}
136136
}
137-
},
138-
"defaultProject": "error-tailor-playground"
137+
}
139138
}

0 commit comments

Comments
 (0)