feat: update to angular 12

.eslintrc.json

@@ -0,0 +1,69 @@
+{
+  "root": true,
+  "ignorePatterns": [
+    "projects/**/*"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "*.ts"
+      ],
+      "parserOptions": {
+        "project": [
+          "tsconfig.json",
+          "e2e/tsconfig.json"
+        ],
+        "createDefaultProgram": true
+      },
+      "extends": [
+        "plugin:@angular-eslint/ng-cli-compat",
+        "plugin:@angular-eslint/ng-cli-compat--formatting-add-on",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "arv",
+            "style": "kebab-case"
+          }
+        ],
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "arv",
+            "style": "camelCase"
+          }
+        ],
+        "@typescript-eslint/consistent-type-definitions": "error",
+        "@typescript-eslint/dot-notation": "off",
+        "@typescript-eslint/explicit-member-accessibility": [
+          "off",
+          {
+            "accessibility": "explicit"
+          }
+        ],
+        "@typescript-eslint/unified-signatures": "off",
+        "brace-style": [
+          "error",
+          "1tbs"
+        ],
+        "id-blacklist": "off",
+        "id-match": "off",
+        "no-underscore-dangle": "off",
+        "object-shorthand": "off"
+      }
+    },
+    {
+      "files": [
+        "*.html"
+      ],
+      "extends": [
+        "plugin:@angular-eslint/template/recommended"
+      ],
+      "rules": {}
+    }
+  ]
+}

angular-reactive-validation/package.json

@@ -1,7 +1,7 @@
 {
   "name": "angular-reactive-validation",
   "description": "Reactive Forms validation shouldn't require the developer to write lots of HTML to show validation messages. This library makes it easy.",
-  "version": "5.0.0",
+  "version": "6.0.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/davidwalschots/angular-reactive-validation.git"
@@ -20,18 +20,18 @@
   "private": false,
   "dependencies": {},
   "peerDependencies": {
-    "@angular/core": "^11.0.0",
-    "@angular/common": "^11.0.0",
-    "@angular/forms": "^11.0.0",
-    "rxjs": "^6.5.4"
+    "@angular/core": "^12.0.0",
+    "@angular/common": "^12.0.0",
+    "@angular/forms": "^12.0.0",
+    "rxjs": "^6.5.3"
   },
   "ngPackage": {
     "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
     "dest": "../dist/angular-reactive-validation",
     "lib": {
       "entryFile": "src/public_api.ts"
     },
-    "whitelistedNonPeerDependencies": [
+    "allowedNonPeerDependencies": [
       "."
     ]
   }

angular-reactive-validation/src/form/form.directive.ts

@@ -3,7 +3,7 @@ import { FormGroupDirective } from '@angular/forms';
 import { Observable } from 'rxjs';
 
 @Directive({
-  // tslint:disable-next-line:directive-selector
+  // eslint-disable-next-line @angular-eslint/directive-selector
   selector: 'form[formGroup]'
 })
 /**
@@ -13,7 +13,7 @@ export class FormDirective {
   /**
    * Observable which emits when the form is submitted.
    */
-  submitted: Observable<{}>;
+  submitted: Observable<any>;
 
   constructor(formGroupDirective: FormGroupDirective) {
     this.submitted = formGroupDirective.ngSubmit.asObservable();

angular-reactive-validation/src/get-control-path.ts

@@ -7,7 +7,7 @@ import { AbstractControl } from '@angular/forms';
  *
  * Note that FormArray indexes are also put in the path, e.g.: 'person.0.name.firstName'.
  */
-export function getControlPath(control: AbstractControl): string {
+export const getControlPath = (control: AbstractControl): string => {
   const parentControl = control.parent;
   if (parentControl) {
     let path = getControlPath(parentControl);
@@ -25,4 +25,4 @@ export function getControlPath(control: AbstractControl): string {
   }
 
   return '';
-}
+};

angular-reactive-validation/src/get-form-control-from-container.ts

@@ -1,8 +1,8 @@
 import { FormGroup, FormControl, ControlContainer, FormGroupDirective } from '@angular/forms';
 
-export function getFormControlFromContainer(name: string, controlContainer: ControlContainer | undefined): FormControl {
+export const getFormControlFromContainer = (name: string, controlContainer: ControlContainer | undefined): FormControl => {
   if (controlContainer) {
-    const control = (<FormGroup>controlContainer.control).controls[name];
+    const control = (controlContainer.control as FormGroup).controls[name];
     if (!control) {
       throw new Error(`There is no control named '${name}'` +
         (getPath(controlContainer).length > 0 ? ` within '${getPath(controlContainer).join('.')}'` : '') + '.');
@@ -18,13 +18,10 @@ export function getFormControlFromContainer(name: string, controlContainer: Cont
     throw new Error(`You can't pass a string to arv-validation-messages's for attribute, when the ` +
       `arv-validation-messages element is not a child of an element with a formGroupName or formGroup declaration.`);
   }
-}
+};
 
-export function isControlContainerVoidOrInitialized(controlContainer: ControlContainer | undefined) {
-  return !!(!controlContainer || (<FormGroupDirective>controlContainer).form ||
-    (controlContainer.formDirective && (<FormGroupDirective>controlContainer.formDirective).form));
-}
+export const isControlContainerVoidOrInitialized = (controlContainer: ControlContainer | undefined) =>
+!!(!controlContainer || (controlContainer as FormGroupDirective).form ||
+    (controlContainer.formDirective && (controlContainer.formDirective as FormGroupDirective).form));
 
-function getPath(controlContainer: ControlContainer): string[] {
-  return controlContainer.path || [];
-}
+const getPath = (controlContainer: ControlContainer): string[] => controlContainer.path || [];

angular-reactive-validation/src/reactive-validation-module-configuration-token.ts

@@ -2,5 +2,5 @@ import { InjectionToken } from '@angular/core';
 
 import { ReactiveValidationModuleConfiguration } from './reactive-validation-module-configuration';
 
-export const ReactiveValidationModuleConfigurationToken =
+export const REACTIVE_VALIDATION_MODULE_CONFIGURATION_TOKEN =
   new InjectionToken<ReactiveValidationModuleConfiguration>('ReactiveValidationModuleConfiguration');

angular-reactive-validation/src/reactive-validation.module.spec.ts

@@ -1,7 +1,7 @@
 import { TestBed } from '@angular/core/testing';
 
 import { ReactiveValidationModule } from './reactive-validation.module';
-import { ReactiveValidationModuleConfigurationToken } from './reactive-validation-module-configuration-token';
+import { REACTIVE_VALIDATION_MODULE_CONFIGURATION_TOKEN } from './reactive-validation-module-configuration-token';
 
 describe(`ReactiveValidationModule`, () => {
   describe(`when not calling forRoot`, () => {
@@ -12,7 +12,7 @@ describe(`ReactiveValidationModule`, () => {
     });
 
     it(`should not provide configuration`, () => {
-      expect(() => TestBed.inject(ReactiveValidationModuleConfigurationToken)).toThrowError(/No provider for/);
+      expect(() => TestBed.inject(REACTIVE_VALIDATION_MODULE_CONFIGURATION_TOKEN)).toThrowError(/No provider for/);
     });
   });
 
@@ -29,7 +29,7 @@ describe(`ReactiveValidationModule`, () => {
     });
 
     it(`should provide configuration`, () => {
-      expect(TestBed.inject(ReactiveValidationModuleConfigurationToken)).toEqual(configuration);
+      expect(TestBed.inject(REACTIVE_VALIDATION_MODULE_CONFIGURATION_TOKEN)).toEqual(configuration);
     });
   });
 });

angular-reactive-validation/src/reactive-validation.module.ts

@@ -5,7 +5,7 @@ import { ValidationMessagesComponent } from './validation-messages/validation-me
 import { ValidationMessageComponent } from './validation-message/validation-message.component';
 import { FormDirective } from './form/form.directive';
 import { ReactiveValidationModuleConfiguration } from './reactive-validation-module-configuration';
-import { ReactiveValidationModuleConfigurationToken } from './reactive-validation-module-configuration-token';
+import { REACTIVE_VALIDATION_MODULE_CONFIGURATION_TOKEN } from './reactive-validation-module-configuration-token';
 
 @NgModule({
   imports: [
@@ -27,7 +27,7 @@ export class ReactiveValidationModule {
     return {
       ngModule: ReactiveValidationModule,
       providers: [{
-        provide: ReactiveValidationModuleConfigurationToken, useValue: configuration
+        provide: REACTIVE_VALIDATION_MODULE_CONFIGURATION_TOKEN, useValue: configuration
       }]
     };
   }

angular-reactive-validation/src/validation-error.spec.ts

@@ -12,9 +12,9 @@ describe('ValidationError', () => {
     const error = ValidationError.fromFirstError(control);
 
     expect(error).not.toBeUndefined();
-    expect((<ValidationError>error).control).toEqual(control);
-    expect((<ValidationError>error).key).toEqual('required');
-    expect((<ValidationError>error).errorObject).toEqual(requiredErrorObject);
+    expect((error as ValidationError).control).toEqual(control);
+    expect((error as ValidationError).key).toEqual('required');
+    expect((error as ValidationError).errorObject).toEqual(requiredErrorObject);
   });
 
   it(`fromFirstError returns undefined when the FormControl has no errors`, () => {
@@ -37,7 +37,7 @@ describe('ValidationError', () => {
     const error = ValidationError.fromFirstError(control);
 
     expect(error).not.toBeUndefined();
-    expect((<ValidationError>error).hasMessage()).toEqual(true);
+    expect((error as ValidationError).hasMessage()).toEqual(true);
   });
 
   it(`hasMessage returns false when the errorObject doesn't contain a message`, () => {
@@ -49,7 +49,7 @@ describe('ValidationError', () => {
     const error = ValidationError.fromFirstError(control);
 
     expect(error).not.toBeUndefined();
-    expect((<ValidationError>error).hasMessage()).toEqual(false);
+    expect((error as ValidationError).hasMessage()).toEqual(false);
   });
 
   it(`getMessage returns the message from the errorObject`, () => {
@@ -64,6 +64,6 @@ describe('ValidationError', () => {
     const error = ValidationError.fromFirstError(control);
 
     expect(error).not.toBeUndefined();
-    expect((<ValidationError>error).getMessage()).toEqual(expected);
+    expect((error as ValidationError).getMessage()).toEqual(expected);
   });
 });

angular-reactive-validation/src/validation-message/validation-message.component.spec.ts

@@ -19,8 +19,8 @@ describe('ValidationMessageComponent', () => {
         }
       };
 
-      component = new ValidationMessageComponent(<any>undefined);
-      error = <ValidationError>ValidationError.fromFirstError(control);
+      component = new ValidationMessageComponent(undefined as any);
+      error = ValidationError.fromFirstError(control) as ValidationError;
     });
 
     it(`returns true when the error key and component key are equal (without for)`, () => {
@@ -41,7 +41,7 @@ describe('ValidationMessageComponent', () => {
     });
 
     it(`returns false when the component 'for' doesn't equal the error's control`, () => {
-      component.for = <any>{};
+      component.for = {} as any;
       component.key = 'required';
 
       const result = component.canHandle(error);
@@ -71,7 +71,7 @@ describe('ValidationMessageComponent', () => {
     });
 
     it(`are displayed by the show function`, () => {
-      const error = <ValidationError>ValidationError.fromFirstError(TestHostComponent.getFormControl());
+      const error = ValidationError.fromFirstError(TestHostComponent.getFormControl()) as ValidationError;
 
       validationMessageComponent.show(error);
 
@@ -83,7 +83,7 @@ describe('ValidationMessageComponent', () => {
     });
 
     it(`are hidden by the reset function`, () => {
-      const error = <ValidationError>ValidationError.fromFirstError(TestHostComponent.getFormControl());
+      const error = ValidationError.fromFirstError(TestHostComponent.getFormControl()) as ValidationError;
 
       validationMessageComponent.show(error);
       fixture.detectChanges();
@@ -93,7 +93,7 @@ describe('ValidationMessageComponent', () => {
     });
 
     it(`and their context is set by the show function`, () => {
-      const error = <ValidationError>ValidationError.fromFirstError(TestHostComponent.getFormControl());
+      const error = ValidationError.fromFirstError(TestHostComponent.getFormControl()) as ValidationError;
 
       validationMessageComponent.show(error);
       expect(validationMessageComponent.context).toEqual(error.errorObject);
@@ -128,14 +128,14 @@ describe('ValidationMessageComponent', () => {
       `
     })
     class TestHostComponent {
+      @ViewChild(ValidationMessageComponent, { static: true }) validationMessageComponent: ValidationMessageComponent;
+
       age = new FormControl(0, [
         Validators.min(10, 'invalid age')
       ]);
       form = new FormGroup({
         age: this.age
       });
-
-      @ViewChild(ValidationMessageComponent, { static: true }) validationMessageComponent: ValidationMessageComponent;
     }
 
     TestBed.configureTestingModule({

angular-reactive-validation/src/validation-message/validation-message.component.ts

@@ -16,10 +16,6 @@ import { getFormControlFromContainer, isControlContainerVoidOrInitialized } from
  * TODO: Trigger revalidation by parent whenever [for] changes.
  */
 export class ValidationMessageComponent implements OnInit {
-  private _context: ValidationErrors | undefined;
-  private _for: FormControl | undefined;
-
-  constructor(@Optional() private controlContainer: ControlContainer) { }
 
   @Input()
   /**
@@ -43,15 +39,10 @@ export class ValidationMessageComponent implements OnInit {
    */
   key: string | undefined;
 
-  private initializeForOnInit = () => {};
+  private _context: ValidationErrors | undefined;
+  private _for: FormControl | undefined;
 
-  /**
-   * The ValidationErrors object that contains contextual information about the error, which can be used for
-   * displaying, e.g. the minimum length within the error message.
-   */
-  get context(): any {
-    return this._context;
-  }
+  constructor(@Optional() private controlContainer: ControlContainer) { }
 
   ngOnInit() {
     this.initializeForOnInit();
@@ -68,4 +59,14 @@ export class ValidationMessageComponent implements OnInit {
   reset() {
     this._context = undefined;
   }
+
+  private initializeForOnInit = () => {};
+
+  /**
+   * The ValidationErrors object that contains contextual information about the error, which can be used for
+   * displaying, e.g. the minimum length within the error message.
+   */
+  get context(): any {
+    return this._context;
+  }
 }