diff --git a/.compodocrc.json b/.compodocrc.json new file mode 100644 index 0000000..4a37f19 --- /dev/null +++ b/.compodocrc.json @@ -0,0 +1,8 @@ +{ + "$schema": "./node_modules/@compodoc/compodoc/src/config/schema.json", + "theme": "material", + "tsconfig": "./tsconfig.json", + "output": "./reports/api-docs/ngx-form-errors", + "includes": "./docs", + "includesName": "Developer Guide" +} diff --git a/docs/DEV_GUIDE.md b/docs/DEV_GUIDE.md index f920f43..60313a3 100644 --- a/docs/DEV_GUIDE.md +++ b/docs/DEV_GUIDE.md @@ -28,11 +28,11 @@ --- -## ngxFormErrors directive +## ngxFormErrors directive This directive creates an Error component dynamically where the validation messages will be displayed. See [Defining the Error component to use](#defining-error-component). -### Binding to a FormControl +### Binding to a FormControl Let's start by defining the Angular form group: @@ -60,7 +60,7 @@ At runtime, the validation messages are displayed by the Error component that is Remember that you need to provide the Error component that will be created by this directive. See [Defining the Error component to use](#defining-error-component). -### Validation errors emitted +### Validation errors emitted In order to display the validation messages in the Error component, the `ngxFormErrors` directive emits an array of error objects containing the following information: @@ -198,7 +198,7 @@ Just wrap the `ngxFormErrors` directive inside a `` element and that' ``` -In fact, we have integrated [Angular Material](https://material.angular.io) in our [demo app](../demo-app). Check it out! +In fact, we have integrated [Angular Material](https://material.angular.io) in our [demo app](https://github.com/NationalBankBelgium/ngx-form-errors/tree/master/demo-app). Check it out! You can also integrate the directive with other UI libraries. This is really simple since you just need to use an `` element to use the `ngxFormErrors` directive so you can place it anywhere in the template according to your needs :wink: @@ -385,7 +385,7 @@ formErrorsMessageService.addErrorMessages({ }); ``` -In fact, we have integrated [ngx-translate](https://github.com/ngx-translate/core) in our [demo app](../demo-app). Check it out! +In fact, we have integrated [ngx-translate](https://github.com/ngx-translate/core) in our [demo app](https://github.com/NationalBankBelgium/ngx-form-errors/tree/master/demo-app). Check it out! The same functionality can be achieved with any other i18n library, you just need to integrate it in your Error component :wink: @@ -466,7 +466,7 @@ getErrorMessages(): NgxValidationErrorMessages; findErrorMessage(error: string, formControlName?: string, group?: string): string | undefined; ``` -### Adding field names or alias globally +### Adding field names or alias globally Sometimes the names of the fields in your model (and therefore in your form) are not really descriptive for the end user, in those cases you might want to display better error messages with meaningful field names. diff --git a/docs/summary.json b/docs/summary.json new file mode 100644 index 0000000..21b03d2 --- /dev/null +++ b/docs/summary.json @@ -0,0 +1,6 @@ +[ + { + "title": "Developer Guide", + "file": "DEV_GUIDE.md" + } +] diff --git a/package.json b/package.json index b61e294..1c88801 100644 --- a/package.json +++ b/package.json @@ -95,7 +95,7 @@ "docs": "npm run docs:clean && npm run docs:generate", "docs:clean": "npx rimraf reports/api-docs", "docs:coverage": "npm run docs:generate -- --coverageTest 85 --coverageTestThresholdFail true", - "docs:generate": "node ./node_modules/@compodoc/compodoc/bin/index-cli src --theme material --tsconfig ./tsconfig.json --output ./reports/api-docs/ngx-form-errors", + "docs:generate": "node ./node_modules/@compodoc/compodoc/bin/index-cli src", "docs:serve": "npm run docs:generate -- --watch --serve --port 4321", "docs:publish": "bash ./gh-deploy.sh --trace", "generate:changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0",