feat: Update to Angular 14 (#44)

- Expose additional components due to Typescript requirement.
- Minor doco updates.
- Build pipeline bump to Node16 (from 14)

Co-authored-by: David Walschots <davidwalschots@users.noreply.github.com>

Author: jafin

.gitignore

@@ -47,3 +47,4 @@ testem.log
 Thumbs.db
 
 TESTS-*.xml
+/.angular/cache/*

CHANGELOG.md

@@ -0,0 +1,5 @@
+# Changelog
+
+## 8.0.0
+
+* add support for Angular 14

README.md

@@ -140,7 +140,7 @@ Note that `formSubmitted` can be undefined when it's not known if the form is su
 
 Angular provides a limited set of validator functions. To declare your own validator functions _and_ combine it with this library use the `ValidatorDeclaration` class. It supports declaring validators with zero, one or two arguments.
 
-**Note** that if your validator doesn't return an object as the inner error result, but e.g. a `boolean` such as in the examples below, then this will be replaced by an object that can hold the validation message. Thus in the first example below `{ 'hasvalue': true }` becomes `{ 'hasvalue': { 'message': 'validation message' } }`.
+**Note** that if your validator doesn't return an object as the inner error result, but e.g. a `boolean` such as in the examples below, then this will be replaced by an object that can hold the validation message. Thus, in the first example below `{ 'hasvalue': true }` becomes `{ 'hasvalue': { 'message': 'validation message' } }`.
 
 ```ts
 const hasValueValidator = ValidatorDeclaration.wrapNoArgumentValidator(control => {

angular-reactive-validation/ng-package.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../dist/angular-reactive-validation",
+  "lib": {
+    "entryFile": "src/public_api.ts"
+  },
+  "allowedNonPeerDependencies": ["."]
+}

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": "7.0.0",
+  "version": "8.0.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/davidwalschots/angular-reactive-validation.git"
@@ -20,19 +20,9 @@
   "private": false,
   "dependencies": {},
   "peerDependencies": {
-    "@angular/core": "^13.0.0",
-    "@angular/common": "^13.0.0",
-    "@angular/forms": "^13.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"
-    },
-    "allowedNonPeerDependencies": [
-      "."
-    ]
+    "@angular/core": "^14.0.0",
+    "@angular/common": "^14.0.0",
+    "@angular/forms": "^14.0.0",
+    "rxjs": "^6.6.7"
   }
 }

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

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { UntypedFormGroup, ReactiveFormsModule } from '@angular/forms';
 import { TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 
@@ -37,6 +37,6 @@ describe('FormDirective', () => {
     </form>`
   })
   class TestHostComponent {
-    form = new FormGroup({});
+    form = new UntypedFormGroup({});
   }
 });

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

@@ -1,18 +1,18 @@
 import { TestBed, inject } from '@angular/core/testing';
-import { FormBuilder } from '@angular/forms';
+import { UntypedFormBuilder } from '@angular/forms';
 
 import { getControlPath } from './get-control-path';
 
 describe('getControlPath', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       providers: [
-        FormBuilder
+        UntypedFormBuilder
       ]
     });
   });
 
-  it(`emits paths for form groups`, inject([FormBuilder], (fb: FormBuilder) => {
+  it(`emits paths for form groups`, inject([UntypedFormBuilder], (fb: UntypedFormBuilder) => {
     const firstName = fb.control('');
     fb.group({
       name: fb.group({
@@ -23,7 +23,7 @@ describe('getControlPath', () => {
     expect(getControlPath(firstName)).toEqual('name.firstName');
   }));
 
-  it(`emits numeric paths for form arrays`, inject([FormBuilder], (fb: FormBuilder) => {
+  it(`emits numeric paths for form arrays`, inject([UntypedFormBuilder], (fb: UntypedFormBuilder) => {
     const firstName = fb.control('');
     const firstName2 = fb.control('');
 
@@ -42,21 +42,21 @@ describe('getControlPath', () => {
     expect(getControlPath(firstName2)).toEqual('persons.1.firstName');
   }));
 
-  it(`emits an empty string for a control without parents`, inject([FormBuilder], (fb: FormBuilder) => {
+  it(`emits an empty string for a control without parents`, inject([UntypedFormBuilder], (fb: UntypedFormBuilder) => {
     const control = fb.control('');
 
     expect(getControlPath(control)).toEqual('');
   }));
 
-  it(`emits an index string for a control with only a form array as parent`, inject([FormBuilder], (fb: FormBuilder) => {
+  it(`emits an index string for a control with only a form array as parent`, inject([UntypedFormBuilder], (fb: UntypedFormBuilder) => {
     const control = fb.control('');
 
     fb.array([control]);
 
     expect(getControlPath(control)).toEqual('0');
   }));
 
-  it(`emits a single identifier for a control with only a single form group as parent`, inject([FormBuilder], (fb: FormBuilder) => {
+  it(`emits a single identifier for a control with only a single form group as parent`, inject([UntypedFormBuilder], (fb: UntypedFormBuilder) => {
     const control = fb.control('');
 
     fb.group({

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

@@ -1,18 +1,18 @@
 import { TestBed, inject } from '@angular/core/testing';
-import { FormBuilder } from '@angular/forms';
+import { UntypedFormBuilder } from '@angular/forms';
 
 import { getFormControlFromContainer } from './get-form-control-from-container';
 
 describe('getFormControlFromContainer', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       providers: [
-        FormBuilder
+        UntypedFormBuilder
       ]
     });
   });
 
-  it(`gets a FormControl from the FormGroup`, inject([FormBuilder], (fb: FormBuilder) => {
+  it(`gets a FormControl from the FormGroup`, inject([UntypedFormBuilder], (fb: UntypedFormBuilder) => {
     const firstName = fb.control('');
     const group = fb.group({
       firstName: firstName
@@ -25,13 +25,13 @@ describe('getFormControlFromContainer', () => {
     expect(getFormControlFromContainer('firstName', container)).toBe(firstName);
   }));
 
-  it(`throws an Error when no container is provided`, inject([FormBuilder], (fb: FormBuilder) => {
+  it(`throws an Error when no container is provided`, inject([UntypedFormBuilder], (fb: UntypedFormBuilder) => {
     expect(() => getFormControlFromContainer('firstName', undefined)).toThrow(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.`));
   }));
 
-  it(`throws an Error when there is no FormControl with the given name`, inject([FormBuilder], (fb: FormBuilder) => {
+  it(`throws an Error when there is no FormControl with the given name`, inject([UntypedFormBuilder], (fb: UntypedFormBuilder) => {
     const group = fb.group({});
 
     const container: any = {
@@ -44,7 +44,7 @@ describe('getFormControlFromContainer', () => {
     ));
   }));
 
-  it(`throws an Error when there is a FormGroup with the given name`, inject([FormBuilder], (fb: FormBuilder) => {
+  it(`throws an Error when there is a FormGroup with the given name`, inject([UntypedFormBuilder], (fb: UntypedFormBuilder) => {
     const group = fb.group({
       name: fb.group({})
     });
@@ -59,7 +59,7 @@ describe('getFormControlFromContainer', () => {
     ));
   }));
 
-  it(`throws an Error when there is a FormArray with the given name`, inject([FormBuilder], (fb: FormBuilder) => {
+  it(`throws an Error when there is a FormArray with the given name`, inject([UntypedFormBuilder], (fb: UntypedFormBuilder) => {
     const group = fb.group({
       name: fb.array([])
     });

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

@@ -1,13 +1,13 @@
-import { FormGroup, FormControl, ControlContainer, FormGroupDirective } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormControl, ControlContainer, FormGroupDirective } from '@angular/forms';
 
-export const getFormControlFromContainer = (name: string, controlContainer: ControlContainer | undefined): FormControl => {
+export const getFormControlFromContainer = (name: string, controlContainer: ControlContainer | undefined): UntypedFormControl => {
   if (controlContainer) {
-    const control = (controlContainer.control as FormGroup).controls[name];
+    const control = (controlContainer.control as UntypedFormGroup).controls[name];
     if (!control) {
       throw new Error(`There is no control named '${name}'` +
         (getPath(controlContainer).length > 0 ? ` within '${getPath(controlContainer).join('.')}'` : '') + '.');
     }
-    if (!(control instanceof FormControl)) {
+    if (!(control instanceof UntypedFormControl)) {
       throw new Error(`The control named '${name}' ` +
         (getPath(controlContainer).length > 0 ? `within '${getPath(controlContainer).join('.')}' ` : '') +
         `is not a FormControl. Maybe you accidentally referenced a FormGroup or FormArray?`);

angular-reactive-validation/src/public_api.ts

@@ -1,7 +1,7 @@
-export {ReactiveValidationModule} from './reactive-validation.module';
-export {ReactiveValidationModuleConfiguration} from './reactive-validation-module-configuration';
-export {Validators} from './validators';
-export {ValidatorDeclaration} from './validator-declaration';
-export {ValidationMessageComponent} from './validation-message/validation-message.component';
-export {FormDirective} from './form/form.directive';
-export {ValidationMessagesComponent} from './validation-messages/validation-messages.component';
+export { FormDirective } from './form/form.directive';
+export { ReactiveValidationModule } from './reactive-validation.module';
+export { ReactiveValidationModuleConfiguration } from './reactive-validation-module-configuration';
+export { Validators } from './validators';
+export { ValidatorDeclaration } from './validator-declaration';
+export { ValidationMessagesComponent } from './validation-messages/validation-messages.component';
+export { ValidationMessageComponent } from './validation-message/validation-message.component';

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

@@ -1,4 +1,4 @@
-import { FormControl } from '@angular/forms';
+import { UntypedFormControl } from '@angular/forms';
 
 export interface ReactiveValidationModuleConfiguration {
   /**
@@ -9,5 +9,5 @@ export interface ReactiveValidationModuleConfiguration {
    * @param formSubmitted whether the form is submitted or not. When undefined, it's not known
    * if the form is submitted, due to the form tag missing a formGroup.
    */
-  displayValidationMessageWhen?: (control: FormControl, formSubmitted: boolean | undefined) => boolean;
+  displayValidationMessageWhen?: (control: UntypedFormControl, formSubmitted: boolean | undefined) => boolean;
 }

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

@@ -1,17 +1,17 @@
-import { FormControl, ValidationErrors } from '@angular/forms';
+import { UntypedFormControl, ValidationErrors } from '@angular/forms';
 
 export class ValidationError {
-  control: FormControl;
+  control: UntypedFormControl;
   key: string;
   errorObject: ValidationErrors;
 
-  constructor(control: FormControl, key: string, errorObject: ValidationErrors) {
+  constructor(control: UntypedFormControl, key: string, errorObject: ValidationErrors) {
     this.control = control;
     this.key = key;
     this.errorObject = errorObject;
   }
 
-  static fromFirstError(control: FormControl): ValidationError | undefined {
+  static fromFirstError(control: UntypedFormControl): ValidationError | undefined {
     if (!control.errors) {
       return undefined;
     }

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

@@ -4,7 +4,7 @@ import { TestBed, ComponentFixture } from '@angular/core/testing';
 import { ValidationMessageComponent } from './validation-message.component';
 import { ValidationError } from '../validation-error';
 import { Validators } from '../validators';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { UntypedFormControl, UntypedFormGroup, ReactiveFormsModule } from '@angular/forms';
 
 describe('ValidationMessageComponent', () => {
   describe('canHandle', () => {
@@ -130,10 +130,10 @@ describe('ValidationMessageComponent', () => {
     class TestHostComponent {
       @ViewChild(ValidationMessageComponent, { static: true }) validationMessageComponent: ValidationMessageComponent;
 
-      age = new FormControl(0, [
+      age = new UntypedFormControl(0, [
         Validators.min(10, 'invalid age')
       ]);
-      form = new FormGroup({
+      form = new UntypedFormGroup({
         age: this.age
       });
     }

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

@@ -1,5 +1,5 @@
 import { Component, Input, ViewEncapsulation, Optional, OnInit } from '@angular/core';
-import { FormControl, ValidationErrors, ControlContainer } from '@angular/forms';
+import { UntypedFormControl, ValidationErrors, ControlContainer } from '@angular/forms';
 
 import { ValidationError } from '../validation-error';
 import { getFormControlFromContainer, isControlContainerVoidOrInitialized } from '../get-form-control-from-container';
@@ -22,14 +22,14 @@ export class ValidationMessageComponent implements OnInit {
    * The FormControl for which a custom validation message should be shown. This is only required when the parent
    * ValidationMessagesComponent has multiple FormControls specified.
    */
-  set for(control: FormControl | string | undefined) {
+  set for(control: UntypedFormControl | string | undefined) {
     if (!isControlContainerVoidOrInitialized(this.controlContainer)) {
       this.initializeForOnInit = () => this.for = control;
       return;
     }
     this._for = typeof control === 'string' ? getFormControlFromContainer(control, this.controlContainer) : control;
   }
-  get for(): FormControl | string | undefined {
+  get for(): UntypedFormControl | string | undefined {
     return this._for;
   }
 
@@ -40,7 +40,7 @@ export class ValidationMessageComponent implements OnInit {
   key: string | undefined;
 
   private _context: ValidationErrors | undefined;
-  private _for: FormControl | undefined;
+  private _for: UntypedFormControl | undefined;
 
   constructor(@Optional() private controlContainer: ControlContainer) { }
 

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

@@ -1,6 +1,7 @@
 import { Component, ViewChild } from '@angular/core';
 import { TestBed, ComponentFixture } from '@angular/core/testing';
-import { ControlContainer, FormGroup, FormControl, ReactiveFormsModule, FormGroupDirective } from '@angular/forms';
+import { ControlContainer, UntypedFormGroup, ReactiveFormsModule, FormGroupDirective, FormControl, FormGroup, UntypedFormControl }
+from '@angular/forms';
 import { Subject } from 'rxjs';
 
 import { ValidationMessagesComponent } from './validation-messages.component';
@@ -14,7 +15,7 @@ const isErrorEvent = (event: Event | string): event is ErrorEvent => (event as E
 describe('ValidationMessagesComponent', () => {
   describe('properties and functions', () => {
     let component: ValidationMessagesComponent;
-    let formGroup: FormGroup;
+    let formGroup: UntypedFormGroup;
     let firstNameControl: FormControl;
     let middleNameControl: FormControl;
     let lastNameControl: FormControl;
@@ -29,7 +30,7 @@ describe('ValidationMessagesComponent', () => {
         Validators.required('A last name is required'),
         Validators.minLength(5, minLength => `Last name needs to be at least ${minLength} characters long`)
       ]);
-      formGroup = new FormGroup({
+      formGroup = new UntypedFormGroup({
         firstName: firstNameControl,
         middleName: middleNameControl,
         lastName: lastNameControl
@@ -83,7 +84,7 @@ describe('ValidationMessagesComponent', () => {
     it(`getErrorMessages returns the first error message per touched control (default configuration)`, () => {
       component.for = [firstNameControl, middleNameControl, lastNameControl];
       firstNameControl.markAsTouched();
-      // We skip middleNameControl on purpose, to ensure that it doesn't return it's error.
+      // We skip middleNameControl on purpose, to ensure that it doesn't return its error.
       lastNameControl.markAsTouched();
       lastNameControl.setValue('abc');
 
@@ -131,7 +132,7 @@ describe('ValidationMessagesComponent', () => {
 
     describe('an alternative configuration', () => {
       const configuration = {
-        displayValidationMessageWhen: () => true
+        displayValidationMessageWhen: (_: UntypedFormControl, __: boolean | undefined) => true
       };
 
       beforeEach(() => {
@@ -155,7 +156,7 @@ describe('ValidationMessagesComponent', () => {
 
       it(`displayValidationMessageWhen's formSubmitted is undefined when a FormDirective is not provided`, () => {
         fixture.detectChanges();
-        expect(configuration.displayValidationMessageWhen).toHaveBeenCalledWith(jasmine.any(FormControl), undefined);
+        expect(configuration.displayValidationMessageWhen).toHaveBeenCalledWith(jasmine.any(UntypedFormControl), undefined);
       });
     });