feat: update to angular 12 (#30)

* Run ng update to 12

* Update validation package dependencies

* fix Validator example.

* style demo with cirrus

* align rxjs version to angular 12 (6.6.7)

* task (ESLint): Migrate TSLint to ESLint

* tidy: remove typings that are in @types/node

* use node 14

* -fix ESlint warnings.

-Fix gitignore,
-set package-lock back to 12.0.0
-fix indenting on app.component

* lint all project files

* lint in pipeline

* bump version

* remove ban-types eslint disable

Co-authored-by: David Walschots <[email protected]>

.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;
+ }
 }