Skip to content

Commit

Permalink
style(directive): reformat code thanks to prettier
Browse files Browse the repository at this point in the history
  • Loading branch information
SuperITMan committed Dec 13, 2023
1 parent 6596bfa commit e1d941b
Show file tree
Hide file tree
Showing 6 changed files with 60 additions and 38 deletions.
3 changes: 1 addition & 2 deletions .cz-config.js
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,7 @@ module.exports = {
},
{
value: "ci",
name:
"ci: Changes to our CI configuration files and scripts (example scopes: GitHub Actions, Travis, Circle, BrowserStack, SauceLabs)"
name: "ci: Changes to our CI configuration files and scripts (example scopes: GitHub Actions, Travis, Circle, BrowserStack, SauceLabs)"
},
{
value: "chore",
Expand Down
26 changes: 15 additions & 11 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,16 +17,17 @@

NgxFormErrors is heavily inspired in these projects:

- [valdr](https://github.com/netceteragroup/valdr): a model centric approach to AngularJS form validation
- [ngx-errors](https://github.com/UltimateAngular/ngx-errors): a declarative validation errors library for Angular Reactive Forms
- [ngx-valdemort](https://github.com/Ninja-Squad/ngx-valdemort): consistent validation error messages for Angular Reactive forms
- [valdr](https://github.com/netceteragroup/valdr): a model centric approach to AngularJS form validation
- [ngx-errors](https://github.com/UltimateAngular/ngx-errors): a declarative validation errors library for Angular Reactive Forms
- [ngx-valdemort](https://github.com/Ninja-Squad/ngx-valdemort): consistent validation error messages for Angular Reactive forms

## Why NgxFormErrors?

Let's just have a look at the following example:

### Plain Reactive Forms approach

<!-- prettier-ignore -->
```html
<input type="text" formControlName="foo" />

Expand All @@ -48,6 +49,7 @@ This easily becomes messy and cumbersome as soon as you have multiple fields. An

Your component template is cleaner :wink:

<!-- prettier-ignore -->
```html
<input type="text" formControlName="foo" />
<!--or-->
Expand All @@ -59,6 +61,7 @@ Your component template is cleaner :wink:

You decide how to display the messages by defining your own Error component :sunglasses:

<!-- prettier-ignore -->
```html
<!-- Error component's template -->

Expand All @@ -75,6 +78,7 @@ You decide how to display the messages by defining your own Error component :sun

And the messages are centralized in a service :astonished:

<!-- prettier-ignore -->
```typescript
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { NgxFormErrorsMessageService, NgxFormErrorsModule } from "@nationalbankbelgium/ngx-form-errors";
Expand Down Expand Up @@ -121,11 +125,11 @@ npm install @nationalbankbelgium/ngx-form-errors

NgxFormErrors is built with [ng-packagr](https://github.com/ng-packagr/ng-packagr) which means that the final package implements the [Angular Package Format](https://docs.google.com/document/d/1CZC2rcpxffTDfRDs6p1cfbmKNLA6x5O-NtkJglDaBVs/preview) providing the following bundles:

- FESM2015
- FESM5
- ESM2015
- ESM5
- UMD
- FESM2015
- FESM5
- ESM2015
- ESM5
- UMD

So it can be consumed by [Angular CLI](https://github.com/angular/angular-cli), [Webpack](https://github.com/webpack/webpack) or [SystemJS](https://github.com/systemjs/systemjs).

Expand All @@ -143,19 +147,19 @@ To know how to release NgxFormErrors, refer to [this page](/RELEASE.md).

### Christopher Cortes

- [@GitHub](https://github.com/christophercr)
- [@GitHub](https://github.com/christophercr)

### Alexis Georges

- [@GitHub](https://github.com/SuperITMan)
- [@GitHub](https://github.com/SuperITMan)

## License

This project and all associated source code is licensed under the terms of the [MIT License](/LICENSE).

## Documentation

- [Developer Guide](/docs/DEV_GUIDE.md)
- [Developer Guide](/docs/DEV_GUIDE.md)

## Thank you notes :)

Expand Down
51 changes: 34 additions & 17 deletions docs/DEV_GUIDE.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,29 +2,29 @@

## Table of Contents

- [ngxFormErrors directive](#ngx-form-errors)
- [ngxFormErrors directive](#ngx-form-errors)

- [Binding to a FormControl](#binding-form-control)
- [Validation errors emitted](#validation-errors)
- [Defining an alias for a form control](#defining-alias-for-one-form-control)
- [Template reference variable](#template-ref-variable)
- [Integrating Angular Material form field errors](#integrating-angular-material)
- [Binding to a FormControl](#binding-form-control)
- [Validation errors emitted](#validation-errors)
- [Defining an alias for a form control](#defining-alias-for-one-form-control)
- [Template reference variable](#template-ref-variable)
- [Integrating Angular Material form field errors](#integrating-angular-material)

- [ngxFormErrorsGroup directive](#ngx-form-errors-group)
- [ngxFormErrorsGroup directive](#ngx-form-errors-group)

- [Defining different messages for the same validation error](#defining-groups)
- [Nesting multiple ngxFormErrorsGroup directives](#multiple-nesting)
- [Defining different messages for the same validation error](#defining-groups)
- [Nesting multiple ngxFormErrorsGroup directives](#multiple-nesting)

- [Error component](#error-component)
- [Error component](#error-component)

- [Defining the Error component to use](#defining-error-component)
- [Integrating translation support for validation messages](#integrating-translation-support)
- [Defining the Error component to use](#defining-error-component)
- [Integrating translation support for validation messages](#integrating-translation-support)

- [NgxFormErrorsMessageService](#ngx-form-errors-message-service)
- [Adding messages for specific validation errors](#adding-messages-for-validation-errors)
- [Getting validation error messages](#getting-validation-error-messages)
- [Adding field names or alias globally](#adding-alias-globally-for-form-controls)
- [Getting field names or alias](#getting-field-names)
- [NgxFormErrorsMessageService](#ngx-form-errors-message-service)
- [Adding messages for specific validation errors](#adding-messages-for-validation-errors)
- [Getting validation error messages](#getting-validation-error-messages)
- [Adding field names or alias globally](#adding-alias-globally-for-form-controls)
- [Getting field names or alias](#getting-field-names)

---

Expand All @@ -36,6 +36,7 @@ This directive creates an Error component dynamically where the validation messa

Let's start by defining the Angular form group:

<!-- prettier-ignore -->
```typescript
this.formGroup = this.formBuilder.group({
foo: ["", Validators.required]
Expand All @@ -45,6 +46,7 @@ this.formGroup = this.formBuilder.group({
Now bind the form and its fields in the template to the model using the [Reactive Forms API](https://angular.io/guide/reactive-forms#reactive-forms-api).
Then add the `ngxFormErrors` directive and bind it to the FormControl whose validation errors you want to display:

<!-- prettier-ignore -->
```html
<form [formGroup]="formGroup" (ngSubmit)="...">
<input type="text" formControlName="foo" />
Expand Down Expand Up @@ -121,6 +123,7 @@ globally via the `NgxFormErrorsMessageService`.

This alias is included in the error emitted by the directive so you can use it in your Error component. For example:

<!-- prettier-ignore -->
```html
<!-- your Error component-->
<div *ngFor="let error of errors; trackBy: trackError" [ngClass]="getErrorClass()">
Expand Down Expand Up @@ -186,6 +189,7 @@ In case you are using [Angular Material](https://material.angular.io), integrati

Just wrap the `ngxFormErrors` directive inside a `<mat-error>` element and that's it!

<!-- prettier-ignore -->
```html
<form [formGroup]="formGroup" (ngSubmit)="...">
<mat-form-field>
Expand All @@ -212,6 +216,7 @@ The "group" defined with the `ngxFormErrorsGroup` is just a logical grouping in

For example, with this template:

<!-- prettier-ignore -->
```html
<form [formGroup]="formGroup" (ngSubmit)="...">
<!-- required field -->
Expand All @@ -226,6 +231,7 @@ For example, with this template:

And this message configuration:

<!-- prettier-ignore -->
```typescript
// in the AppModule or feature module
// inject the NgxFormErrorsMessageService to define the messages
Expand All @@ -239,6 +245,7 @@ Both fields will display the same message: "Required field".

However, if you want to display a different message for one of the fields, you can add the `ngxFormErrorsGroup` directive to add a group to one of them:

<!-- prettier-ignore -->
```html
<form [formGroup]="formGroup" (ngSubmit)="...">
<!-- required field -->
Expand All @@ -256,6 +263,7 @@ However, if you want to display a different message for one of the fields, you c

And provide a different message for it in the message configuration using the group you defined:

<!-- prettier-ignore -->
```typescript
// in the AppModule or feature module
// inject the NgxFormErrorsMessageService to define the messages
Expand All @@ -275,6 +283,7 @@ the validation message to be displayed by the `ngxFormErrors` directive will be

For example:

<!-- prettier-ignore -->
```html
<form [formGroup]="formGroup" (ngSubmit)="...">
<div ngxFormErrorsGroup="parent-group">
Expand All @@ -295,6 +304,7 @@ For example:

The definition of a different message for both fields would be like this:

<!-- prettier-ignore -->
```typescript
// in the AppModule or feature module
// inject the NgxFormErrorsMessageService to define the messages
Expand All @@ -315,6 +325,7 @@ In order to make NgxFormErrors as flexible as possible, there is no Error compon

It must be provided via the `NgxFormErrorsModule.forRoot`:

<!-- prettier-ignore -->
```typescript
@NgModule({
declarations: [AppComponent, YourCustomErrorComponent],
Expand Down Expand Up @@ -355,6 +366,7 @@ This is specially important in case you want to add translation support to your

For example, you can use [ngx-translate](https://github.com/ngx-translate/core) and integrate it in your Error component to translate the messages:

<!-- prettier-ignore -->
```html
<!-- You can translate the message and also pass the error params to have even more flexible translations -->
<span *ngFor="let error of errors; trackBy: trackError" [ngClass]="getErrorClass()">
Expand All @@ -364,6 +376,7 @@ For example, you can use [ngx-translate](https://github.com/ngx-translate/core)

Then in your translations you can use the params passed to the `translate` pipe:

<!-- prettier-ignore -->
```json
{
"VALIDATIONS": {
Expand All @@ -375,6 +388,7 @@ Then in your translations you can use the params passed to the `translate` pipe:

Finally, the messages provided to the `NgxFormErrorsMessageService` should be the translation keys defined above:

<!-- prettier-ignore -->
```typescript
// in the AppModule or feature module
// inject the NgxFormErrorsMessageService to define the messages
Expand All @@ -400,6 +414,7 @@ Then add the messages you want the `ngxFormErrors` directive to display for a sp

For example, in this case we will add messages for the `required` and the `pattern` errors:

<!-- prettier-ignore -->
```typescript
// in the AppModule or feature module
// inject the NgxFormErrorsMessageService to define the messages
Expand Down Expand Up @@ -473,6 +488,7 @@ in those cases you might want to display better error messages with meaningful f

To do this you can provide the field name or alias to be used for specific form control names:

<!-- prettier-ignore -->
```typescript
// in the AppModule or feature module
// inject the NgxFormErrorsMessageService to define the messages
Expand All @@ -487,6 +503,7 @@ then that one has precedence and it will be used instead. See [Defining an alias

This alias is included in the error emitted by the `ngxFormErrors` directive so you can use it in your Error component. For example:

<!-- prettier-ignore -->
```html
<!-- your Error component-->
<div *ngFor="let error of errors; trackBy: trackError" [ngClass]="getErrorClass()">
Expand Down
2 changes: 1 addition & 1 deletion src/directives/form-errors-group.directive.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ describe("NgxFormErrorsGroupDirective", () => {
class TestComponent {
public dummyGroup: string = groupName;

@ViewChild(NgxFormErrorsGroupDirective, { static: false })
@ViewChild(NgxFormErrorsGroupDirective, { static: false })
public formErrorGroup!: NgxFormErrorsGroupDirective;
}

Expand Down
14 changes: 8 additions & 6 deletions src/directives/form-errors.directive.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -112,9 +112,7 @@ describe("NgxFormErrorsDirective", () => {

@Component({
selector: "form-error",
template: `
<div>some content here</div>
`
template: ` <div>some content here</div> `
})
class FormErrorComponent implements NgxFormErrorComponent {
public errors$!: Observable<NgxFormFieldError[]>;
Expand All @@ -129,7 +127,7 @@ describe("NgxFormErrorsDirective", () => {
let mockFormErrorsMessageService: SpyObj<NgxFormErrorsMessageService>;
let mockFormErrorsConfig: NgxFormErrorsConfig;
let mockObserver: SpyObj<Observer<any>>;

const invalidValues: any[] = ["na", "too long value", "", undefined];

function initializeComponentFixture(): void {
Expand Down Expand Up @@ -671,7 +669,9 @@ describe("NgxFormErrorsDirective", () => {
return errorMessages[`${errorGroup}.${errorKey}`] || errorMessages[errorKey] || undefined;
});

const formControl: FormControl = <FormControl>componentWithSubFormGroup.formNgxError.get(`${subFormGroupName}.${formControlName}`);
const formControl: FormControl = <FormControl>(
componentWithSubFormGroup.formNgxError.get(`${subFormGroupName}.${formControlName}`)
);
const valueChanges: any[] = [...invalidValues]; // just invalid values

for (const value of valueChanges) {
Expand Down Expand Up @@ -731,7 +731,9 @@ describe("NgxFormErrorsDirective", () => {
return fieldNames[fieldName] || undefined;
});

const formControl: FormControl = <FormControl>componentWithSubFormGroup.formNgxError.get(`${subFormGroupName}.${formControlName}`);
const formControl: FormControl = <FormControl>(
componentWithSubFormGroup.formNgxError.get(`${subFormGroupName}.${formControlName}`)
);
const valueChanges: any[] = [...invalidValues]; // just invalid values

for (const value of valueChanges) {
Expand Down
2 changes: 1 addition & 1 deletion src/services/form-errors-message.service.ts
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ export class NgxFormErrorsMessageService {
if (group) {
fieldNameKey = `${group}.${fieldName}`; // concatenating group + field name with a "."
}

/* eslint-disable no-prototype-builtins */
if (this.fieldNames.hasOwnProperty(fieldNameKey)) {
return this.fieldNames[fieldNameKey];
Expand Down

0 comments on commit e1d941b

Please sign in to comment.