├── src ├── assets │ └── .gitkeep ├── app │ ├── app.component.spec.ts │ ├── app-routing.module.ts │ ├── app.component.scss │ ├── custom-error-control │ │ ├── custom-error-control.module.ts │ │ └── custom-error-control.component.ts │ ├── app.module.ts │ ├── app.component.ts │ └── app.component.html ├── environments │ ├── environment.prod.ts │ └── environment.ts ├── styles.scss ├── main.ts ├── test.ts ├── index.html ├── favicon.svg └── polyfills.ts ├── .prettierignore ├── demo.gif ├── commitlint.config.js ├── prettier.config.js ├── projects └── ngneat │ └── error-tailor │ ├── src │ ├── lib │ │ ├── types.ts │ │ ├── control-error-anchor.directive.ts │ │ ├── error-tailor.module.ts │ │ ├── form-action.directive.ts │ │ ├── control-error-anchor.directive.spec.ts │ │ ├── form-action.directive.spec.ts │ │ ├── error-tailor.providers.ts │ │ ├── control-error.component.ts │ │ ├── control-error.component.spec.ts │ │ ├── control-error.directive.ts │ │ └── control-error.directive.spec.ts │ ├── test.ts │ └── public-api.ts │ ├── ng-package.json │ ├── tslint.json │ ├── tsconfig.lib.prod.json │ ├── tsconfig.spec.json │ ├── tsconfig.lib.json │ ├── package.json │ ├── README.md │ └── karma.conf.js ├── tsconfig.schematics.spec.json ├── e2e ├── tsconfig.json ├── src │ ├── app.po.ts │ └── app.e2e-spec.ts └── protractor.conf.js ├── tsconfig.app.json ├── .editorconfig ├── tsconfig.spec.json ├── tsconfig.schematics.json ├── .browserslistrc ├── tsconfig.json ├── .gitignore ├── .github └── workflows │ └── ci.yml ├── hooks └── pre-commit.js ├── LICENSE ├── karma.conf.js ├── PULL_REQUEST_TEMPLATE.md ├── ISSUE_TEMPLATE.md ├── CONTRIBUTING.md ├── logo.svg ├── .all-contributorsrc ├── package.json ├── tslint.json ├── CODE_OF_CONDUCT.md ├── angular.json ├── CHANGELOG.md └── README.md /src/assets/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | README.md -------------------------------------------------------------------------------- /demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ngneat/error-tailor/HEAD/demo.gif -------------------------------------------------------------------------------- /src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | describe('AppComponent', () => {}); 2 | -------------------------------------------------------------------------------- /commitlint.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: ['@commitlint/config-conventional'] 3 | }; 4 | -------------------------------------------------------------------------------- /src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /prettier.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | singleQuote: true, 3 | tabWidth: 2, 4 | useTabs: false, 5 | printWidth: 120 6 | }; 7 | -------------------------------------------------------------------------------- /projects/ngneat/error-tailor/src/lib/types.ts: -------------------------------------------------------------------------------- 1 | export type ErrMsgFn = (err: any) => string; 2 | export type ErrorsMap = Record; 3 | -------------------------------------------------------------------------------- /tsconfig.schematics.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.spec.json", 3 | "compilerOptions": { 4 | "module": "commonjs", 5 | "rootDir": "./schematics" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /projects/ngneat/error-tailor/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json", 3 | "dest": "../../../dist/ngneat/error-tailor", 4 | "lib": { 5 | "entryFile": "src/public-api.ts" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /e2e/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/e2e", 5 | "module": "commonjs", 6 | "target": "es2018", 7 | "types": ["jasmine", "jasminewd2", "node"] 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /projects/ngneat/error-tailor/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tslint.json", 3 | "rules": { 4 | "directive-selector": [true, "attribute", "lib", "camelCase"], 5 | "component-selector": [true, "element", "lib", "kebab-case"] 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /projects/ngneat/error-tailor/tsconfig.lib.prod.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.lib.json", 3 | "compilerOptions": { 4 | "declarationMap": false 5 | }, 6 | "angularCompilerOptions": { 7 | "compilationMode": "partial" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts", 9 | "src/polyfills.ts" 10 | ], 11 | "include": [ 12 | "src/**/*.d.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /projects/ngneat/error-tailor/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../../out-tsc/spec", 5 | "types": ["jasmine", "node"] 6 | }, 7 | "files": ["src/test.ts"], 8 | "include": ["**/*.spec.ts", "**/*.d.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | const routes: Routes = []; 5 | 6 | @NgModule({ 7 | imports: [RouterModule.forRoot(routes, {})], 8 | exports: [RouterModule] 9 | }) 10 | export class AppRoutingModule {} 11 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo(): Promise { 5 | return browser.get(browser.baseUrl) as Promise; 6 | } 7 | 8 | getTitleText(): Promise { 9 | return element(by.css('app-root .content span')).getText() as Promise; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /projects/ngneat/error-tailor/src/lib/control-error-anchor.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive, inject, ViewContainerRef } from '@angular/core'; 2 | 3 | @Directive({ 4 | selector: '[controlErrorAnchor]', 5 | standalone: true, 6 | exportAs: 'controlErrorAnchor' 7 | }) 8 | export class ControlErrorAnchorDirective { 9 | vcr = inject(ViewContainerRef); 10 | } 11 | -------------------------------------------------------------------------------- /tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /src/app/app.component.scss: -------------------------------------------------------------------------------- 1 | ::ng-deep .my-class { 2 | border: 1px solid red; 3 | border-radius: 3px; 4 | } 5 | 6 | .form-radio-group-label { 7 | padding-right: 10px; 8 | } 9 | 10 | .form-radio-label { 11 | padding: 5px 5px 2px 5px; 12 | margin-bottom: 0px; 13 | } 14 | 15 | .btn-custom { 16 | margin: 3px; 17 | } 18 | 19 | h1 { 20 | margin-top: 1em; 21 | } 22 | -------------------------------------------------------------------------------- /src/styles.scss: -------------------------------------------------------------------------------- 1 | body { 2 | margin-top: 30px; 3 | } 4 | 5 | .control-error { 6 | width: 100%; 7 | margin-top: 0.25rem; 8 | font-size: 80%; 9 | color: #dc3545; 10 | } 11 | 12 | .on-submit.ng-submitted, 13 | form:not(.on-submit) { 14 | .error-tailor-has-error .ng-invalid { 15 | border-color: #dc3545; 16 | padding-right: calc(1.5em + 0.75rem); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /tsconfig.schematics.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "module": "commonjs", 5 | "outDir": "./dist/ngneat/error-tailor/schematics", 6 | "declaration": true, 7 | "rootDir": "./schematics", 8 | "types": [], 9 | "skipLibCheck": true 10 | }, 11 | "include": ["./schematics/**/*.ts"], 12 | "exclude": ["./schematics/**/*.spec.ts"] 13 | } 14 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.error(err)); 13 | -------------------------------------------------------------------------------- /src/app/custom-error-control/custom-error-control.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { CustomControlErrorComponent } from './custom-error-control.component'; 4 | 5 | @NgModule({ 6 | declarations: [CustomControlErrorComponent], 7 | imports: [CommonModule], 8 | exports: [CustomControlErrorComponent] 9 | }) 10 | export class CustomErrorControlModule {} 11 | -------------------------------------------------------------------------------- /.browserslistrc: -------------------------------------------------------------------------------- 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 | # You can see what browsers were selected by your queries by running: 6 | # npx browserslist 7 | 8 | > 0.5% 9 | last 2 versions 10 | Firefox ESR 11 | not dead 12 | not IE 9-11 # For IE 9-11 support, remove 'not'. -------------------------------------------------------------------------------- /projects/ngneat/error-tailor/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../../out-tsc/lib", 5 | "declarationMap": true, 6 | "declaration": true, 7 | "inlineSources": true, 8 | "types": [], 9 | "lib": ["dom", "es2018"] 10 | }, 11 | "angularCompilerOptions": { 12 | "skipTemplateCodegen": true, 13 | "strictMetadataEmit": true, 14 | "enableResourceInlining": true 15 | }, 16 | "exclude": ["src/test.ts", "**/*.spec.ts"] 17 | } 18 | -------------------------------------------------------------------------------- /src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing'; 6 | 7 | // First, initialize the Angular testing environment. 8 | getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), { 9 | teardown: { destroyAfterEach: false } 10 | }); 11 | -------------------------------------------------------------------------------- /projects/ngneat/error-tailor/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js'; 4 | import 'zone.js/testing'; 5 | import { getTestBed } from '@angular/core/testing'; 6 | import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing'; 7 | 8 | // First, initialize the Angular testing environment. 9 | getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), { 10 | teardown: { destroyAfterEach: false } 11 | }); 12 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ErrorTailorPlayground 6 | 7 | 8 | 9 | 15 | 16 | 17 |
18 | 19 |
20 | 21 | 22 | -------------------------------------------------------------------------------- /projects/ngneat/error-tailor/src/lib/error-tailor.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { ControlErrorAnchorDirective } from './control-error-anchor.directive'; 3 | import { DefaultControlErrorComponent } from './control-error.component'; 4 | import { ControlErrorsDirective } from './control-error.directive'; 5 | import { FormActionDirective } from './form-action.directive'; 6 | 7 | const _errorTailorImports = [ 8 | ControlErrorsDirective, 9 | ControlErrorAnchorDirective, 10 | DefaultControlErrorComponent, 11 | FormActionDirective, 12 | ]; 13 | 14 | @NgModule({ 15 | imports: [_errorTailorImports], 16 | exports: [_errorTailorImports], 17 | }) 18 | export class errorTailorImports {} 19 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "downlevelIteration": true, 9 | "experimentalDecorators": true, 10 | "module": "es2020", 11 | "moduleResolution": "node", 12 | "importHelpers": true, 13 | "target": "ES2022", 14 | "lib": ["es2018", "dom"], 15 | "paths": { 16 | "@ngneat/error-tailor": ["projects/ngneat/error-tailor/src/public-api.ts"] 17 | }, 18 | "useDefineForClassFields": false 19 | }, 20 | "angularCompilerOptions": { 21 | "fullTemplateTypeCheck": true, 22 | "strictInjectionParameters": true 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false 7 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/plugins/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | import { browser, logging } from 'protractor'; 3 | 4 | describe('workspace-project App', () => { 5 | let page: AppPage; 6 | 7 | beforeEach(() => { 8 | page = new AppPage(); 9 | }); 10 | 11 | it('should display welcome message', () => { 12 | page.navigateTo(); 13 | expect(page.getTitleText()).toEqual('error-tailor-playground app is running!'); 14 | }); 15 | 16 | afterEach(async () => { 17 | // Assert that there are no errors emitted from the browser 18 | const logs = await browser.manage().logs().get(logging.Type.BROWSER); 19 | expect(logs).not.toContain(jasmine.objectContaining({ 20 | level: logging.Level.SEVERE, 21 | } as logging.Entry)); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /projects/ngneat/error-tailor/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@ngneat/error-tailor", 3 | "version": "5.0.1", 4 | "description": "Seamless form errors for Angular Applications", 5 | "dependencies": { 6 | "tslib": "2.5.0" 7 | }, 8 | "peerDependencies": { 9 | "@angular/core": ">=17.0.0" 10 | }, 11 | "keywords": [ 12 | "angular", 13 | "form errors", 14 | "errors", 15 | "validation" 16 | ], 17 | "license": "MIT", 18 | "publishConfig": { 19 | "access": "public" 20 | }, 21 | "bugs": { 22 | "url": "https://github.com/ngneat/error-tailor/issue" 23 | }, 24 | "homepage": "https://github.com/ngneat/error-tailor#readme", 25 | "repository": { 26 | "type": "git", 27 | "url": "https://github.com/ngneat/error-tailor" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /projects/ngneat/error-tailor/src/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of error-tailor 3 | */ 4 | 5 | export { errorTailorImports } from './lib/error-tailor.module'; 6 | export { 7 | ControlErrorComponent, 8 | ErrorComponentTemplate, 9 | DefaultControlErrorComponent, 10 | } from './lib/control-error.component'; 11 | export { ControlErrorAnchorDirective } from './lib/control-error-anchor.directive'; 12 | export { ControlErrorsDirective } from './lib/control-error.directive'; 13 | export { FormActionDirective } from './lib/form-action.directive'; 14 | export { 15 | ErrorTailorConfig, 16 | ErrorsUseValue, 17 | ErrorTailorConfigProvider, 18 | ErrorsProvider, 19 | FORM_ERRORS, 20 | ErrorsUseFactory, 21 | provideErrorTailorConfig, 22 | } from './lib/error-tailor.providers'; 23 | -------------------------------------------------------------------------------- /projects/ngneat/error-tailor/src/lib/form-action.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive, ElementRef, OnInit, inject } from '@angular/core'; 2 | import { tap, fromEvent, Observable, Subject, takeUntil } from 'rxjs'; 3 | 4 | @Directive({ 5 | standalone: true, 6 | selector: 'form[errorTailor]', 7 | }) 8 | export class FormActionDirective implements OnInit { 9 | private submit = new Subject(); 10 | private destroy = new Subject(); 11 | private host: ElementRef = inject(ElementRef); 12 | 13 | element = this.host.nativeElement; 14 | submit$ = this.submit.asObservable(); 15 | reset$: Observable = fromEvent(this.element, 'reset').pipe(tap(() => this.submit.next(null))); 16 | 17 | ngOnInit() { 18 | fromEvent(this.element, 'submit').pipe(takeUntil(this.destroy)).subscribe(this.submit); 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | # Only exists if Bazel was run 8 | /bazel-out 9 | 10 | # dependencies 11 | /node_modules 12 | 13 | # profiling files 14 | chrome-profiler-events*.json 15 | speed-measure-plugin*.json 16 | 17 | # IDEs and editors 18 | /.idea 19 | .project 20 | .classpath 21 | .c9/ 22 | *.launch 23 | .settings/ 24 | *.sublime-workspace 25 | 26 | # IDE - VSCode 27 | .vscode/* 28 | !.vscode/settings.json 29 | !.vscode/tasks.json 30 | !.vscode/launch.json 31 | !.vscode/extensions.json 32 | .history/* 33 | 34 | # misc 35 | /.angular/cache 36 | /.sass-cache 37 | /connect.lock 38 | /coverage 39 | /libpeerconnection.log 40 | npm-debug.log 41 | yarn-error.log 42 | testem.log 43 | /typings 44 | 45 | # System Files 46 | .DS_Store 47 | Thumbs.db 48 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: CI 2 | 3 | on: 4 | push: 5 | branches: [master] 6 | pull_request: 7 | 8 | jobs: 9 | build: 10 | runs-on: ubuntu-latest 11 | 12 | steps: 13 | - uses: actions/checkout@v3 14 | 15 | - name: Npm install 16 | uses: actions/setup-node@v3 17 | with: 18 | node-version: 18 19 | cache: 'npm' 20 | - run: npm i 21 | 22 | - name: Run build lib 23 | run: npm run build:lib 24 | 25 | - name: Run build playground 26 | run: npm run build 27 | test: 28 | runs-on: ubuntu-latest 29 | 30 | steps: 31 | - uses: actions/checkout@v3 32 | 33 | - name: Npm install 34 | uses: actions/setup-node@v3 35 | with: 36 | node-version: 18 37 | cache: 'npm' 38 | - run: npm i 39 | 40 | - name: Run tests 41 | run: npm run test:lib:headless 42 | -------------------------------------------------------------------------------- /src/app/custom-error-control/custom-error-control.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef } from '@angular/core'; 2 | import { DefaultControlErrorComponent } from '@ngneat/error-tailor'; 3 | 4 | @Component({ 5 | selector: 'custom-control-error', 6 | template: ` 7 | @if (!errorTemplate) { 8 |
9 |

{{ errorText }}

10 |
11 | } 12 | 13 | `, 14 | changeDetection: ChangeDetectionStrategy.OnPush, 15 | styles: [ 16 | ` 17 | .hide-control { 18 | display: none !important; 19 | } 20 | 21 | :host { 22 | display: block; 23 | } 24 | `, 25 | ], 26 | }) 27 | export class CustomControlErrorComponent extends DefaultControlErrorComponent {} 28 | -------------------------------------------------------------------------------- /hooks/pre-commit.js: -------------------------------------------------------------------------------- 1 | const { execSync } = require('child_process'); 2 | const chalk = require('chalk'); 3 | 4 | /** Map of forbidden words and their match regex */ 5 | const words = { 6 | fit: '\\s*fit\\(', 7 | fdescribe: '\\s*fdescribe\\(', 8 | debugger: '(debugger);?' 9 | }; 10 | let status = 0; 11 | for (let word of Object.keys(words)) { 12 | const matchRegex = words[word]; 13 | const gitCommand = `git diff --staged -G"${matchRegex}" --name-only`; 14 | const badFiles = execSync(gitCommand).toString(); 15 | const filesAsArray = badFiles.split('\n'); 16 | const tsFileRegex = /\.ts$/; 17 | const onlyTsFiles = filesAsArray.filter(file => tsFileRegex.test(file.trim())); 18 | if (onlyTsFiles.length) { 19 | status = 1; 20 | console.log(chalk.bgRed.black.bold(`The following files contains '${word}' in them:`)); 21 | console.log(chalk.bgRed.black(onlyTsFiles.join('\n'))); 22 | } 23 | } 24 | process.exit(status); 25 | -------------------------------------------------------------------------------- /e2e/protractor.conf.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | // Protractor configuration file, see link for more information 3 | // https://github.com/angular/protractor/blob/master/lib/config.ts 4 | 5 | const { SpecReporter } = require('jasmine-spec-reporter'); 6 | 7 | /** 8 | * @type { import("protractor").Config } 9 | */ 10 | exports.config = { 11 | allScriptsTimeout: 11000, 12 | specs: [ 13 | './src/**/*.e2e-spec.ts' 14 | ], 15 | capabilities: { 16 | browserName: 'chrome' 17 | }, 18 | directConnect: true, 19 | baseUrl: 'http://localhost:4200/', 20 | framework: 'jasmine', 21 | jasmineNodeOpts: { 22 | showColors: true, 23 | defaultTimeoutInterval: 30000, 24 | print: function() {} 25 | }, 26 | onPrepare() { 27 | require('ts-node').register({ 28 | project: require('path').join(__dirname, './tsconfig.json') 29 | }); 30 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); 31 | } 32 | }; -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy 4 | of this software and associated documentation files (the "Software"), to deal 5 | in the Software without restriction, including without limitation the rights 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | copies of the Software, and to permit persons to whom the Software is 8 | furnished to do so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in 11 | all copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | THE SOFTWARE. 20 | 21 | -------------------------------------------------------------------------------- /projects/ngneat/error-tailor/README.md: -------------------------------------------------------------------------------- 1 | # ErrorTailor 2 | 3 | This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.1.9. 4 | 5 | ## Code scaffolding 6 | 7 | Run `ng generate component component-name --project error-tailor` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project error-tailor`. 8 | > Note: Don't forget to add `--project error-tailor` or else it will be added to the default project in your `angular.json` file. 9 | 10 | ## Build 11 | 12 | Run `ng build error-tailor` to build the project. The build artifacts will be stored in the `dist/` directory. 13 | 14 | ## Publishing 15 | 16 | After building your library with `ng build error-tailor`, go to the dist folder `cd dist/error-tailor` and run `npm publish`. 17 | 18 | ## Running unit tests 19 | 20 | Run `ng test error-tailor` to execute the unit tests via [Karma](https://karma-runner.github.io). 21 | 22 | ## Further help 23 | 24 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md). 25 | -------------------------------------------------------------------------------- /karma.conf.js: -------------------------------------------------------------------------------- 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-istanbul-reporter'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | coverageIstanbulReporter: { 19 | dir: require('path').join(__dirname, './coverage/error-tailor-playground'), 20 | reports: ['html', 'lcovonly', 'text-summary'], 21 | fixWebpackSourcePaths: true 22 | }, 23 | reporters: ['progress', 'kjhtml'], 24 | port: 9876, 25 | colors: true, 26 | logLevel: config.LOG_INFO, 27 | autoWatch: true, 28 | browsers: [process.env.CI ? 'ChromeHeadless' : 'Chrome'], 29 | singleRun: process.env.CI, 30 | restartOnFileChange: true 31 | }); 32 | }; 33 | -------------------------------------------------------------------------------- /projects/ngneat/error-tailor/karma.conf.js: -------------------------------------------------------------------------------- 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-istanbul-reporter'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | coverageIstanbulReporter: { 19 | dir: require('path').join(__dirname, '../../../coverage/ngneat/error-tailor'), 20 | reports: ['html', 'lcovonly', 'text-summary'], 21 | fixWebpackSourcePaths: true 22 | }, 23 | reporters: ['progress', 'kjhtml'], 24 | port: 9876, 25 | colors: true, 26 | logLevel: config.LOG_INFO, 27 | autoWatch: true, 28 | browsers: [process.env.CI ? 'ChromeHeadless' : 'Chrome'], 29 | singleRun: process.env.CI, 30 | restartOnFileChange: true 31 | }); 32 | }; 33 | -------------------------------------------------------------------------------- /PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | ## PR Checklist 2 | 3 | Please check if your PR fulfills the following requirements: 4 | 5 | - [ ] The commit message follows our guidelines: CONTRIBUTING.md#commit 6 | - [ ] Tests for the changes have been added (for bug fixes / features) 7 | - [ ] Docs have been added / updated (for bug fixes / features) 8 | 9 | ## PR Type 10 | 11 | What kind of change does this PR introduce? 12 | 13 | 14 | 15 | ``` 16 | [ ] Bugfix 17 | [ ] Feature 18 | [ ] Code style update (formatting, local variables) 19 | [ ] Refactoring (no functional changes, no api changes) 20 | [ ] Build related changes 21 | [ ] CI related changes 22 | [ ] Documentation content changes 23 | [ ] Other... Please describe: 24 | ``` 25 | 26 | ## What is the current behavior? 27 | 28 | 29 | 30 | Issue Number: N/A 31 | 32 | ## What is the new behavior? 33 | 34 | ## Does this PR introduce a breaking change? 35 | 36 | ``` 37 | [ ] Yes 38 | [ ] No 39 | ``` 40 | 41 | 42 | 43 | ## Other information 44 | -------------------------------------------------------------------------------- /projects/ngneat/error-tailor/src/lib/control-error-anchor.directive.spec.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input } from '@angular/core'; 2 | import { SpectatorDirective, createDirectiveFactory } from '@ngneat/spectator'; 3 | 4 | import { ControlErrorAnchorDirective } from './control-error-anchor.directive'; 5 | 6 | @Component({ 7 | selector: 'get-anchor', 8 | template: '', 9 | standalone: true 10 | }) 11 | class GetAnchorComponent { 12 | @Input() 13 | anchor: ControlErrorAnchorDirective; 14 | } 15 | 16 | describe('ControlErrorAnchorDirective', () => { 17 | let spectator: SpectatorDirective; 18 | const createDirective = createDirectiveFactory({ 19 | directive: ControlErrorAnchorDirective, 20 | imports: [GetAnchorComponent] 21 | }); 22 | 23 | beforeEach(() => { 24 | spectator = createDirective(` 25 |
26 | 27 | `); 28 | }); 29 | 30 | it('should create', () => { 31 | expect(spectator.directive).toBeTruthy(); 32 | }); 33 | 34 | it('should contain ViewContainerRef instance', () => { 35 | expect(spectator.directive.vcr).toBeTruthy(); 36 | }); 37 | 38 | it('should be exported as `controlErrorAnchor`', () => { 39 | spectator.detectChanges(); 40 | expect(spectator.query(GetAnchorComponent).anchor).toBe(spectator.directive); 41 | }); 42 | }); 43 | -------------------------------------------------------------------------------- /projects/ngneat/error-tailor/src/lib/form-action.directive.spec.ts: -------------------------------------------------------------------------------- 1 | import { SpectatorDirective, createDirectiveFactory } from '@ngneat/spectator'; 2 | 3 | import { FormActionDirective } from './form-action.directive'; 4 | import { NO_ERRORS_SCHEMA } from '@angular/core'; 5 | 6 | describe('FormActionDirective', () => { 7 | let spectator: SpectatorDirective; 8 | const createDirective = createDirectiveFactory({ 9 | directive: FormActionDirective, 10 | schemas: [NO_ERRORS_SCHEMA] 11 | }); 12 | 13 | beforeEach(() => { 14 | spectator = createDirective(` 15 |
16 | `); 17 | }); 18 | 19 | it('should create', () => { 20 | expect(spectator.directive).toBeTruthy(); 21 | }); 22 | 23 | it('host element should be the form element', () => { 24 | const form = spectator.query('form'); 25 | expect(spectator.directive.element).toBe(form); 26 | }); 27 | 28 | it('should emit reset when form is reset and remove class `form-submitted` after submit', () => { 29 | let reset = false; 30 | 31 | spectator.directive.reset$.subscribe({ 32 | next: () => (reset = true) 33 | }); 34 | 35 | const form = spectator.query('form'); 36 | 37 | spectator.dispatchFakeEvent(form, 'submit'); 38 | 39 | spectator.detectChanges(); 40 | 41 | spectator.dispatchFakeEvent(form, 'reset'); 42 | 43 | expect(reset).toBeTrue(); 44 | expect(form.classList.contains('form-submitted')).toBeFalse(); 45 | }); 46 | }); 47 | -------------------------------------------------------------------------------- /projects/ngneat/error-tailor/src/lib/error-tailor.providers.ts: -------------------------------------------------------------------------------- 1 | import { FactorySansProvider, InjectionToken, Type, ValueSansProvider } from '@angular/core'; 2 | import { ErrorsMap } from './types'; 3 | import { ControlErrorComponent } from './control-error.component'; 4 | 5 | export const FORM_ERRORS = new InjectionToken('FORM_ERRORS', { 6 | providedIn: 'root', 7 | factory: () => { 8 | return {}; 9 | }, 10 | }); 11 | 12 | export interface ErrorsUseValue extends ValueSansProvider { 13 | useValue: ErrorsMap; 14 | } 15 | 16 | export interface ErrorsUseFactory extends FactorySansProvider { 17 | useFactory: (...args: any[]) => ErrorsMap; 18 | } 19 | 20 | export type ErrorsProvider = ErrorsUseValue | ErrorsUseFactory; 21 | 22 | export type ErrorTailorConfig = { 23 | errors?: ErrorsProvider; 24 | blurPredicate?: (element: Element) => boolean; 25 | controlErrorsClass?: string | string[] | undefined; 26 | controlCustomClass?: string | string[] | undefined; 27 | controlErrorComponent?: Type; 28 | controlClassOnly?: boolean; 29 | controlErrorComponentAnchorFn?: (hostElement: Element, errorElement: Element) => () => void; 30 | controlErrorsOn?: { 31 | async?: boolean; 32 | blur?: boolean; 33 | change?: boolean; 34 | status?: boolean; 35 | }; 36 | }; 37 | 38 | export const ErrorTailorConfigProvider = new InjectionToken('ErrorTailorConfigProvider'); 39 | 40 | export function provideErrorTailorConfig(config: ErrorTailorConfig) { 41 | return [ 42 | { 43 | provide: ErrorTailorConfigProvider, 44 | useValue: config, 45 | }, 46 | { 47 | provide: FORM_ERRORS, 48 | ...config.errors, 49 | }, 50 | ]; 51 | } 52 | -------------------------------------------------------------------------------- /ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 6 | 7 | ## I'm submitting a... 8 | 9 | 10 | 

11 | [ ] Regression (a behavior that used to work and stopped working in a new release)
12 | [ ] Bug report  
13 | [ ] Performance issue
14 | [ ] Feature request
15 | [ ] Documentation issue or request
16 | [ ] Support request
17 | [ ] Other... Please describe:
18 |
19 | 20 | ## Current behavior 21 | 22 | 23 | 24 | ## Expected behavior 25 | 26 | 27 | 28 | ## Minimal reproduction of the problem with instructions 29 | 30 | ## What is the motivation / use case for changing the behavior? 31 | 32 | 33 | 34 | ## Environment 35 | 36 | 

37 | Angular version: X.Y.Z
38 | 
39 | 
40 | Browser:
41 | - [ ] Chrome (desktop) version XX
42 | - [ ] Chrome (Android) version XX
43 | - [ ] Chrome (iOS) version XX
44 | - [ ] Firefox version XX
45 | - [ ] Safari (desktop) version XX
46 | - [ ] Safari (iOS) version XX
47 | - [ ] IE version XX
48 | - [ ] Edge version XX
49 |  
50 | For Tooling issues:
51 | - Node version: XX  
52 | - Platform:  
53 | 
54 | Others:
55 | 
56 |
57 | -------------------------------------------------------------------------------- /src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule } from '@angular/core'; 3 | 4 | import { AppRoutingModule } from './app-routing.module'; 5 | import { AppComponent } from './app.component'; 6 | import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 7 | import { errorTailorImports, provideErrorTailorConfig } from '@ngneat/error-tailor'; 8 | import { CommonModule } from '@angular/common'; 9 | import { CustomErrorControlModule } from './custom-error-control/custom-error-control.module'; 10 | 11 | /** 12 | * Hook function to attach error messages to the control's grandparent rather than its parent. 13 | * Uses direct manipulation of DOM. 14 | */ 15 | function controlErrorComponentAnchorFn(hostElem: Element, errorElem: Element) { 16 | hostElem.parentElement.parentElement.append(errorElem); 17 | return () => { 18 | hostElem.removeChild(errorElem); 19 | }; 20 | } 21 | 22 | @NgModule({ 23 | declarations: [AppComponent], 24 | imports: [ 25 | CommonModule, 26 | BrowserModule, 27 | AppRoutingModule, 28 | FormsModule, 29 | ReactiveFormsModule, 30 | CustomErrorControlModule, 31 | errorTailorImports 32 | ], 33 | providers: [ 34 | provideErrorTailorConfig({ 35 | errors: { 36 | useFactory() { 37 | return { 38 | required: 'This field is required', 39 | minlength: ({ requiredLength, actualLength }) => `Expect ${requiredLength} but got ${actualLength}`, 40 | invalidAddress: error => `Address not valid` 41 | }; 42 | }, 43 | deps: [] 44 | } 45 | //controlErrorComponent: CustomControlErrorComponent, // Uncomment to see errors being rendered using a custom component 46 | //controlErrorComponentAnchorFn: controlErrorComponentAnchorFn // Uncomment to see errors being positioned differently 47 | }) 48 | ], 49 | bootstrap: [AppComponent] 50 | }) 51 | export class AppModule {} 52 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to Error-tailor 2 | 3 | 🙏 We would ❤️ for you to contribute to Error-tailor and help make it even better than it is today! 4 | 5 | # Developing 6 | 7 | Start by installing all dependencies: 8 | 9 | ```bash 10 | npm i 11 | ``` 12 | 13 | Run the tests: 14 | 15 | ```bash 16 | npm test 17 | npm run e2e 18 | ``` 19 | 20 | Run the playground app: 21 | 22 | ```bash 23 | npm start 24 | ``` 25 | 26 | ## Building 27 | 28 | ```bash 29 | npm run build 30 | ``` 31 | 32 | ## Coding Rules 33 | 34 | To ensure consistency throughout the source code, keep these rules in mind as you are working: 35 | 36 | - All features or bug fixes **must be tested** by one or more specs (unit-tests). 37 | - All public API methods **must be documented**. 38 | 39 | ## Commit Message Guidelines 40 | 41 | We have very precise rules over how our git commit messages can be formatted. This leads to **more 42 | readable messages** that are easy to follow when looking through the **project history**. But also, 43 | we use the git commit messages to **generate the Error-tailor changelog**. 44 | 45 | ### Commit Message Format 46 | 47 | Each commit message consists of a **header**, a **body** and a **footer**. The header has a special 48 | format that includes a **type**, a **scope** and a **subject**: 49 | 50 | ``` 51 | (): 52 | 53 | 54 | 55 |