Skip to content
This repository was archived by the owner on May 3, 2024. It is now read-only.

Commit ad49c7c

Browse files
DmitryEfimenkoDmitryEfimenko
committed
feat: 🎸 move material deps into @ngspot/ngx-errors-material
✅ Closes: #9
1 parent 1fdc209 commit ad49c7c

25 files changed

+334
-52
lines changed

‎README.md

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -204,7 +204,7 @@ First, define the new error state matcher:
204204

205205
```ts
206206
@Injectable({ providedIn: 'root' })
207-
export class MyAwesomeErrorStateMatcher implements ErrorStateMatcher {
207+
export class MyAwesomeErrorStateMatcher implements IErrorStateMatcher {
208208
isErrorState(
209209
control: AbstractControl | null,
210210
form: FormGroupDirective | NgForm | null
@@ -232,9 +232,6 @@ providers: [
232232

233233
Now the string `'myAwesome'` can be used either in the `showErrorsWhenInput` property of the configuration object or in the `[showWhen]` inputs.
234234

235-
> In the example above, notice the use of the `ErrorStateMatcher` class. This class actually comes from `@angular/material/core`. Under the hood, @ngspot/ngx-errors uses the `ErrorStateMatcher` class to implement all available error state matchers allowing @ngspot/ngx-errors to integrate with Angular Material inputs smoothly.
236-
> Looking at the [documentation](https://material.angular.io/components/input/overview#changing-when-error-messages-are-shown), Angular Material inputs have their own way of setting logic for determining if the input needs to be highlighted red or not. If custom behavior is needed, a developer needs to provide appropriate configuration. @ngspot/ngx-errors configures this functionality for the developer under the hood.
237-
238235
### Overriding global config
239236

240237
You can override the configuration specified at the module level by using `[showWhen]` input on `[ngxErrors]` and on `[ngxError]` directives:
@@ -298,6 +295,29 @@ Include something similar to the following in global CSS file:
298295
}
299296
```
300297

298+
## Integration with @angular/material
299+
300+
Angular Material inputs have [their own way](https://material.angular.io/components/input/overview#changing-when-error-messages-are-shown) of setting logic for determining if the input needs to be highlighted red or not. If custom behavior is needed, a developer needs to provide appropriate configuration. @ngspot/ngx-errors configures this functionality for the developer under the hood. In order for this configuration to integrate with @angular/material inputs smoothly, use package `@ngspot/ngx-errors-material`:
301+
302+
Install:
303+
304+
```
305+
npm install @ngspot/ngx-errors-material
306+
```
307+
308+
Use:
309+
310+
```ts
311+
import { NgxErrorsMaterialModule } from '@ngspot/ngx-errors-material';
312+
313+
@NgModule({
314+
imports: [
315+
// ...
316+
NgxErrorsMaterialModule
317+
]
318+
})
319+
```
320+
301321
## Miscellaneous
302322

303323
ngx-errors library provides a couple of misc function that ease your work with forms.

‎angular.json

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -133,6 +133,37 @@
133133
}
134134
}
135135
}
136+
},
137+
"ngx-errors-material": {
138+
"projectType": "library",
139+
"root": "projects/ngx-errors-material",
140+
"sourceRoot": "projects/ngx-errors-material/src",
141+
"prefix": "lib",
142+
"architect": {
143+
"build": {
144+
"builder": "@angular-devkit/build-angular:ng-packagr",
145+
"options": {
146+
"project": "projects/ngx-errors-material/ng-package.json"
147+
},
148+
"configurations": {
149+
"production": {
150+
"tsConfig": "projects/ngx-errors-material/tsconfig.lib.prod.json"
151+
},
152+
"development": {
153+
"tsConfig": "projects/ngx-errors-material/tsconfig.lib.json"
154+
}
155+
},
156+
"defaultConfiguration": "production"
157+
},
158+
"test": {
159+
"builder": "@angular-devkit/build-angular:karma",
160+
"options": {
161+
"main": "projects/ngx-errors-material/src/test.ts",
162+
"tsConfig": "projects/ngx-errors-material/tsconfig.spec.json",
163+
"karmaConfig": "projects/ngx-errors-material/karma.conf.js"
164+
}
165+
}
166+
}
136167
}
137168
},
138169
"cli": {

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
"hooks:pre-commit": "node hooks/pre-commit.js",
1414
"commit": "git-cz",
1515
"release:first": "npm run release -- --first-release",
16-
"build:lib": "ng build ngx-errors --configuration production",
16+
"build:lib": "ng build ngx-errors --configuration production && ng build ngx-errors-material --configuration production",
1717
"test:lib": "ng test ngx-errors",
1818
"test:lib:headless": "cross-env CI=true npm run test:lib",
1919
"test:lib:coverage": "npm run test:lib -- --code-coverage",

‎projects/ngx-errors-material/.browserslistrc

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
2+
# For additional information regarding the format and rule options, please see:
3+
# https://github.com/browserslist/browserslist#queries
4+
5+
# For the full list of supported browsers by the Angular framework, please see:
6+
# https://angular.io/guide/browser-support
7+
8+
# You can see what browsers were selected by your queries by running:
9+
# npx browserslist
10+
11+
last 1 Chrome version
12+
last 1 Firefox version
13+
last 2 Edge major versions
14+
last 2 Safari major versions
15+
last 2 iOS major versions
16+
Firefox ESR

‎projects/ngx-errors-material/README.md

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<p align="center">
2+
<img width="20%" height="20%" src="./logo.png">
3+
</p>
4+
5+
<br />
6+
7+
[![MIT](https://img.shields.io/packagist/l/doctrine/orm.svg?style=flat-square)]()
8+
[![commitizen](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)]()
9+
[![PRs](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)]()
10+
[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
11+
[![All Contributors](https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square)](#contributors-)
12+
13+
> Reactive forms validation for pros
14+
15+
This package is expected to be installed together with the package `@ngspot/ngx-errors` when use use `@angular/material` inputs.
16+
17+
See full documentation for [@ngspot/ngx-errors here](https://github.com/ngspot/ngx-errors).
18+
19+
## Installation
20+
21+
`npm install @ngspot/ngx-errors-material`
22+
23+
## Usage
24+
25+
Import library into application module:
26+
27+
```ts
28+
import { NgxErrorsModule } from '@ngspot/ngx-errors';
29+
import { NgxErrorsMaterialModule } from '@ngspot/ngx-errors-material'; // <-- import the module
30+
31+
@NgModule({
32+
imports: [
33+
NgxErrorsModule,
34+
NgxErrorsMaterialModule, // <-- include imported module in app module
35+
],
36+
})
37+
export class MyAppModule {}
38+
```

‎projects/ngx-errors-material/karma.conf.js

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
// Karma configuration file, see link for more information
2+
// https://karma-runner.github.io/1.0/config/configuration-file.html
3+
4+
module.exports = function (config) {
5+
config.set({
6+
basePath: '',
7+
frameworks: ['jasmine', '@angular-devkit/build-angular'],
8+
plugins: [
9+
require('karma-jasmine'),
10+
require('karma-chrome-launcher'),
11+
require('karma-jasmine-html-reporter'),
12+
require('karma-coverage'),
13+
require('@angular-devkit/build-angular/plugins/karma'),
14+
],
15+
client: {
16+
jasmine: {
17+
// you can add configuration options for Jasmine here
18+
// the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
19+
// for example, you can disable the random execution with `random: false`
20+
// or set a specific seed with `seed: 4321`
21+
},
22+
clearContext: false, // leave Jasmine Spec Runner output visible in browser
23+
},
24+
jasmineHtmlReporter: {
25+
suppressAll: true, // removes the duplicated traces
26+
},
27+
coverageReporter: {
28+
dir: require('path').join(
29+
__dirname,
30+
'../../coverage/ngx-errors-material'
31+
),
32+
subdir: '.',
33+
reporters: [{ type: 'html' }, { type: 'text-summary' }],
34+
},
35+
reporters: ['progress', 'kjhtml'],
36+
port: 9876,
37+
colors: true,
38+
logLevel: config.LOG_INFO,
39+
autoWatch: true,
40+
browsers: ['Chrome'],
41+
singleRun: false,
42+
restartOnFileChange: true,
43+
});
44+
};

‎projects/ngx-errors-material/ng-package.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
3+
"dest": "../../dist/ngx-errors-material",
4+
"lib": {
5+
"entryFile": "src/public-api.ts"
6+
}
7+
}

‎projects/ngx-errors-material/package.json

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"name": "@ngspot/ngx-errors-material",
3+
"version": "3.0.0",
4+
"peerDependencies": {
5+
"@angular/core": "^13.0.0",
6+
"@angular/material": "^13.0.0"
7+
},
8+
"author": {
9+
"name": "Dmitry Efimenko",
10+
"email": "[email protected]"
11+
},
12+
"keywords": [
13+
"angular",
14+
"validation",
15+
"reactive forms",
16+
"material"
17+
],
18+
"license": "MIT",
19+
"homepage": "https://github.com/ngspot/ngx-errors",
20+
"publishConfig": {
21+
"access": "public"
22+
},
23+
"repository": {
24+
"type": "git",
25+
"url": "https://github.com/ngspot/ngx-errors"
26+
},
27+
"dependencies": {
28+
"tslib": "^2.3.0"
29+
},
30+
"bugs": {
31+
"url": "https://github.com/ngspot/ngx-errors/issues"
32+
}
33+
}

‎projects/ngx-errors-material/src/lib/ngx-errors-material.module.ts

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { NgModule } from '@angular/core';
2+
import { ReactiveFormsModule } from '@angular/forms';
3+
import { ErrorStateMatcher } from '@angular/material/core';
4+
import { ErrorsConfiguration, ErrorStateMatchers } from '@ngspot/ngx-errors';
5+
import { SetMatInputErrorStateMatcherDirective } from './set-mat-input-error-state-matcher.directive';
6+
7+
const declarationsAndExports = [SetMatInputErrorStateMatcherDirective];
8+
9+
@NgModule({
10+
imports: [ReactiveFormsModule],
11+
declarations: [...declarationsAndExports],
12+
exports: [...declarationsAndExports],
13+
providers: [
14+
{
15+
provide: ErrorStateMatcher,
16+
useFactory: (
17+
errorsConfiguration: ErrorsConfiguration,
18+
errorStateMatchers: ErrorStateMatchers
19+
) => {
20+
return errorStateMatchers.get(errorsConfiguration.showErrorsWhenInput);
21+
},
22+
deps: [ErrorsConfiguration, ErrorStateMatchers],
23+
},
24+
],
25+
})
26+
export class NgxErrorsMaterialModule {}

‎projects/ngx-errors/src/lib/set-mat-input-error-state-matcher.directive.ts renamed to ‎projects/ngx-errors-material/src/lib/set-mat-input-error-state-matcher.directive.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { Directive, OnDestroy, Self } from '@angular/core';
22
import { ErrorStateMatcher } from '@angular/material/core';
33
import { MatInput } from '@angular/material/input';
4+
import { OverriddenShowWhen } from '@ngspot/ngx-errors';
45
import { Subscription } from 'rxjs';
56
import { tap } from 'rxjs/operators';
6-
import { OverriddenShowWhen } from './overridden-show-when.service';
77

88
@Directive({
99
// tslint:disable-next-line: directive-selector

0 commit comments

Comments
 (0)