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 <[email protected]>

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';